UX: improve mobile list mode layout (#29)

discourse · Jun 14, 2023 · b0a42da · b0a42da
1 parent bd495f7
commit b0a42da
Showing 1 changed file with 16 additions and 2 deletions.
diff --git a/mobile/mobile.scss b/mobile/mobile.scss
@@ -6,12 +6,26 @@
 .topic-thumbnails-list {
   .topic-list-body .topic-list-item {
     .right {
-      grid-template-columns: 15% 65% 20%;
-      grid-template-rows: 15% 40% 45%;
+      display: grid;
+      grid-template-columns: 15% auto 15%;
       grid-template-areas: "thumbnail title replies" "thumbnail data data";
+      gap: 0 0.5em;
+      .num {
+        text-align: right;
+      }
       .topic-list-thumbnail {
         grid-area: thumbnail;
       }
+      .main-link {
+        grid-area: title;
+        width: unset;
+      }
+      .topic-item-stats {
+        grid-area: data;
+      }
+      .pull-right {
+        grid-area: replies;
+      }
     }
   }
 }