UX: adapt topic card layout for bookmarks & assigned list (#97)

scss/topic-cards.scss

@@ -315,46 +315,81 @@
   .link-bottom-line {
     font-size: unset;
   }
-  grid-template-columns: 20px min-content min-content auto min-content min-content 36px;
+  //regular card without excerpt class
+  grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
   grid-template-areas:
     ". . . . . . dropdown"
-    "avatar update metadata metadata metadata category dropdown";
+    "avatar update metadata metadata metadata . category";
   @include breakpoint(mobile-extra-large) {
-    grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
+    grid-template-columns: min-content min-content auto min-content min-content min-content min-content;
     grid-template-areas:
-      ". . . . . . . dropdown"
+      " . . . . . . dropdown"
-      "avatar update metadata metadata metadata metadata category dropdown";
+      "update metadata metadata metadata metadata category category";
+    .avatar {
+      display: none;
+    }
   }
   &.has-metadata {
-    grid-template-areas:
+    grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
-      ". . . . . . dropdown"
-      "avatar update metadata metadata metadata category dropdown";
     @include breakpoint(mobile-extra-large) {
       grid-template-areas:
         ". . . . . . . dropdown"
-        "avatar update metadata metadata metadata metadata category dropdown";
+        "update update metadata metadata metadata metadata category category";
-    }
+      .avatar {
-  }
-  &.excerpt-expanded {
-    grid-template-areas:
-      ". . . . . . . dropdown"
-      "avatar update metadata metadata metadata metadata metadata dropdown"
-      "excerpt excerpt excerpt excerpt excerpt . . dropdown"
-      "excerpt excerpt excerpt excerpt excerpt category category dropdown";
-    @include breakpoint(mobile-extra-large) {
-      grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
-      .post-excerpt {
         display: none;
       }
     }
-    &.has-metadata {
+  }
+
+  //card with excerpt (all in horizon since the toggle is gone)
+  &.excerpt-expanded {
+    grid-template-columns: 20px min-content auto minmax(0, 100px);
+    @include breakpoint(extra-large, $rule: min-width) {
+      grid-template-columns: 20px min-content auto min-content;
+    }
+    grid-template-areas:
+      ". . .  dropdown"
+      "avatar update metadata metadata"
+      "excerpt excerpt excerpt ."
+      "excerpt excerpt excerpt category";
+
+    .badge-category__wrapper {
+      align-self: flex-end;
+      height: min-content;
+      max-width: 100%;
+    }
+
+    @include breakpoint(mobile-extra-large) {
+      grid-template-columns: auto min-content;
       grid-template-areas:
-        ". . . . . . . dropdown"
+        ".  dropdown"
-        "avatar update metadata metadata metadata metadata metadata dropdown"
+        "category category";
-        "excerpt excerpt excerpt excerpt excerpt . . dropdown"
+      .post-excerpt,
-        "excerpt excerpt excerpt excerpt excerpt category category dropdown";
+      .avatar {
+        display: none;
+      }
+    }
+
+    &.has-metadata {
+      grid-template-columns: 20px min-content auto min-content;
+      grid-template-areas:
+        ". . . dropdown"
+        "avatar update metadata metadata"
+        "excerpt excerpt excerpt . "
+        "excerpt excerpt excerpt category";
+      @include breakpoint(mobile-extra-large) {
+        grid-template-columns: auto min-content;
+        grid-template-areas:
+          " . dropdown"
+          "metadata category";
+
+        .bookmark-metadata {
+          flex-wrap: wrap;
+        }
+      }
     }
   }
+
   td.author-avatar {
     grid-area: avatar;
   }
@@ -372,12 +407,21 @@
     display: contents;
     .bookmark-metadata {
       grid-area: metadata;
+      margin: 0;
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-inline-xs);
+    }
+    .bookmark-metadata-item {
+      margin: 0;
+      vertical-align: middle;
     }
     .bookmark-status-with-link {
       grid-column: 1/-2;
       grid-row: 1/2;
     }
   }
+
   .post-excerpt {
     grid-area: excerpt;
     margin: 0;
@@ -386,12 +430,24 @@
     display: contents;
     .bookmark-actions-dropdown {
       grid-area: dropdown;
-      align-self: center;
+      align-self: flex-start;
+      height: 1em;
+
+      .select-kit-header {
+        padding-top: 0;
+        margin-left: auto;
+        align-items: center;
+        background: transparent;
+      }
+      .select-kit-header-wrapper {
+        height: 1em;
+        width: 1em;
+      }
     }
   }
+
   .post-metadata.topic-list-data.updated-at {
     grid-area: update;
-    margin-left: auto;
   }
   td.activity .post-activity {
     display: none;
@@ -400,28 +456,40 @@
 
 // Assigned List
 .topic-list-item.assigned-list-item {
+  .topic-status-card {
+    display: none;
+  }
   td.main-link .link-top-line {
     grid-column: 1/-3;
   }
-  grid-template-columns: 20px min-content min-content auto min-content min-content 36px;
+  grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
   grid-template-areas:
     ". . . . . status dropdown"
-    "activity . . . likes-replies category dropdown";
+    "activity . . . . likes-replies category";
   @include breakpoint(mobile-extra-large) {
-    td.main-link .link-top-line {
-      grid-column: 1/-2 !important;
-    }
     grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
     grid-template-areas:
       "category category . . . . status dropdown"
-      ". . . . . . . dropdown"
+      ". . . . . . . . "
-      "activity . . . . . likes-replies dropdown";
+      "activity . . . . . . likes-replies";
   }
   .assign-topic-buttons {
     display: contents;
     .assign-actions-dropdown {
       grid-area: dropdown;
-      align-self: center;
+      justify-content: flex-end;
+      height: 1em;
+
+      .select-kit-header {
+        padding-top: 0;
+        margin-left: auto;
+        align-items: center;
+        background: transparent;
+      }
+      .select-kit-header-wrapper {
+        height: 1em;
+        width: 1em;
+      }
     }
   }
   td.topic-category-status-data {