UX: Additional refactor for topic-list prep

assets/javascripts/discourse/templates/components/assigned-topic-list.hbs

@@ -1,5 +1,5 @@
 {{#unless skipHeader}}
-  <thead class="topic-list-header">
+  <thead class="topic-list-header assigned-topic-list-header">
     {{raw "topic-list-header"
       canBulkSelect=canBulkSelect
       canDoBulkActions=canDoBulkActions
@@ -17,7 +17,7 @@
   </thead>
 {{/unless}}
 
-<tbody class="topic-list-body">
+<tbody class="topic-list-body assigned-topic-list-body">
   {{#each filteredTopics as |topic|}}
     {{assigned-topic-list-item
       topic=topic

assets/javascripts/discourse/templates/mobile/components/basic-assigned-topic-list.hbs

@@ -8,8 +8,8 @@
   {{/if}}
 
   {{#if topics}}
-    <table class="topic-list">
-      <tbody class="topic-list-body">
+    <table class="topic-list assigned-topic-list">
+      <tbody class="topic-list-body assigned-topic-list-body">
         {{#each topics as |t|}}
           {{assigned-topic-list-item
             topic=t

assets/stylesheets/assigns.scss

@@ -188,7 +188,7 @@
   color: var(--primary-medium);
 }
 
-.topic-list-header .topic-list-data.num:last-of-type {
+.assigned-topic-list-header .topic-list-data.num:last-of-type {
   margin-right: 50px; // account for button in topic-list-items in topic-list-refactor
 }
 

assets/stylesheets/mobile/assigns.scss

@@ -19,6 +19,8 @@
     grid-template-areas:
       "left-top right-top"
       "left-bottom right-bottom";
+    grid-column-start: 1;
+    grid-column-end: 3;
     .discourse-tags {
       grid-area: left-top;
       max-width: unset;
@@ -34,6 +36,11 @@
   }
 }
 
+.assigned-topic-list-item .topic-list-data {
+  display: grid;
+  grid-template-columns: 1fr 37px; // 37px is size of button
+}
+
 .select-kit-row[data-value="unassign-mobile-header"] {
   background: rgba(var(--primary-low-rgb), 0.5);
   pointer-events: none;