FIX: More explicit grid layout

FIX: More explicit grid layout

diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index a4a6417..5ba8529 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -8,12 +8,14 @@
   grid-template-rows: auto auto 1fr auto;
   grid-row-gap: s(5);
   .user-primary-navigation {
-    grid-column-start: span 2;
+    grid-column-start: 1;
+    grid-column-end: 3;
     grid-row-start: 1;
     grid-row-end: 2;
   }
   .user-secondary-navigation {
     grid-column-start: 1;
+    grid-column-end: 2;
     grid-row-start: 2;
     grid-row-end: 3;
   }
@@ -21,14 +23,16 @@
   .spinner {
     grid-row-start: 2;
     grid-row-end: 4;
-    grid-column-end: span 2;
+    grid-column-start: 1;
+    grid-column-end: 3;
   }
   .user-content {
     min-width: 100%;
   }
+  .user-additional-controls + .user-content,
   .user-secondary-navigation + .user-content {
     grid-column-start: 2;
-    grid-column-end: span 1;
+    grid-column-end: 3;
   }
   .user-additional-controls {
     grid-row-start: 3;
diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss
index e62353e..061e772 100644
--- a/app/assets/stylesheets/mobile/user.scss
+++ b/app/assets/stylesheets/mobile/user.scss
@@ -9,14 +9,15 @@
   .user-primary-navigation {
     grid-column-start: 1;
     grid-row-start: 1;
+    grid-column-end: 2;
   }
   .user-secondary-navigation {
     grid-column-start: 2;
     grid-row-start: 1;
   }
+  .user-additional-controls + .user-content,
   .user-secondary-navigation + .user-content {
     grid-column-start: 1;
-    grid-column-end: span 2;
   }
   .user-additional-controls {
     grid-column-start: 1;
@@ -25,7 +26,7 @@
   .user-content,
   .spinner {
     grid-row-start: 3;
-    grid-column-start: span 2;
+    grid-column-start: 1;
   }
 }

GitHub sha: b1d707b3

1 Like