From ded8c51fd4fe2d4ce56b6d6219cd9988d519e90e Mon Sep 17 00:00:00 2001
From: djanelle-mit <djanelle@mit.edu>
Date: Wed, 3 Dec 2025 13:52:49 -0500
Subject: [PATCH] Layout fixes when on typical phone portrait breakpoint

---
 app/assets/stylesheets/partials/_layouts.scss | 22 ++++++++++++++++++-
 .../stylesheets/partials/_variables.scss      |  3 +++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/partials/_layouts.scss b/app/assets/stylesheets/partials/_layouts.scss
index 4952dd4a..055a4223 100644
--- a/app/assets/stylesheets/partials/_layouts.scss
+++ b/app/assets/stylesheets/partials/_layouts.scss
@@ -77,7 +77,7 @@
 
 }
 
-// Adjust styles for navigation when on smaller screens
+// Adjust styles for navigation when on tablet-sized screens
 @media (max-width: $bp-screen-md) {
   .wrap-footer.footer-slim .identity {
     margin-bottom: 0;
@@ -113,4 +113,24 @@
     }
   }
 
+}
+
+// Adjust layout when on phone portrait sized screens
+@media (max-width: $bp-screen-xs) {
+
+  .wrap-footer.footer-slim .wrap-middle .wrap-policies nav {
+    flex-direction: column;
+    gap: 16px;
+  }
+  
+  .wrap-footer-institute .footer-info-institute {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+
+    .license {
+      margin-left: 0;
+    }
+  }
+
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/partials/_variables.scss b/app/assets/stylesheets/partials/_variables.scss
index 1871f7f8..a2ff7351 100644
--- a/app/assets/stylesheets/partials/_variables.scss
+++ b/app/assets/stylesheets/partials/_variables.scss
@@ -94,6 +94,9 @@ $lh-base:   1.2;
 // Container max-width
 $container-max-width: 1280px;
 
+// Additional breakpoints over mitlib-style
+$bp-screen-xs: 410px;
+
 // Left/Right Edge Padding
 $edge-padding-desktop: 32px;
 $edge-padding-tablet: 24px;