refactor(styles): use compose to declare grid layouts once

I'm using same grid layouts in multiple places. To avoid maintenance
issue, I think it is better to declare the grid once and to import its
declaration where it is needed. Thanks to CSS modules, I can use
compose to do that.

1 files changed, 12 insertions, 7 deletions

diff --git a/src/styles/pages/Listing.module.scss b/src/styles/pages/Listing.module.scss
index 3d1ee9c..fdad3f5 100644
--- a/src/styles/pages/Listing.module.scss
+++ b/src/styles/pages/Listing.module.scss
@@ -2,23 +2,28 @@
 @use "@styles/abstracts/placeholders";
 
 .wrapper {
-  display: grid;
-  grid-template-columns:
-    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
-    minmax(0, 1fr);
+  composes: grid from "@styles/layout/_grid.scss";
   align-items: first baseline;
   padding-bottom: var(--spacing-xl);
 
   > header {
     grid-column: 1 / -1;
   }
+
+  > section {
+    grid-column: 1 / 3;
+  }
+
+  > button {
+    grid-column: 2;
+  }
 }
 
 .body {
   grid-column: 2;
 
   @include mix.media("screen") {
-    @include mix.dimensions("lg") {
+    @include mix.dimensions("md") {
       grid-row: 2;
     }
   }
@@ -37,10 +42,10 @@ li.item {
   margin-top: var(--spacing-lg);
 
   @include mix.media("screen") {
-    @include mix.dimensions("lg") {
+    @include mix.dimensions("md") {
       grid-column: 3;
       grid-row: 2;
-      margin-left: var(--spacing-lg);
+      max-height: 100vh;
       position: sticky;
       top: 0;
       overflow-y: auto;