UX: Improve table overflow on mobile

UX: Improve table overflow on mobile

diff --git a/assets/javascripts/discourse/widgets/alert-receiver.js.es6 b/assets/javascripts/discourse/widgets/alert-receiver.js.es6
index ab714b0..0d7d062 100644
--- a/assets/javascripts/discourse/widgets/alert-receiver.js.es6
+++ b/assets/javascripts/discourse/widgets/alert-receiver.js.es6
@@ -285,10 +285,7 @@ createWidget("alert-receiver-collapse-toggle", {
 
 createWidget("alert-receiver-table", {
   tagName: "div.alert-receiver-table",
-  buildKey: attrs => `alert-table-${attrs.status}-${attrs.headingLink}`,
-  buildClasses() {
-    return `md-table`;
-  },
+  buildKey: attrs => `alert-table-${attrs.status}-${attrs.heading}`,
 
   buildAttributes(attrs) {
     return {
@@ -311,13 +308,15 @@ createWidget("alert-receiver-table", {
     {{alert-receiver-collapse-toggle heading=attrs.heading count=attrs.alerts.length headingLink=attrs.headingLink collapsed=state.collapsed}}
 
     {{#unless state.collapsed}}
-      <table class="prom-alerts-table">
-        <tbody>        
-          {{#each attrs.alerts as |alert|}}
-            {{alert-receiver-row alert=alert showDescription=this.transformed.showDescriptionColumn}}
-          {{/each}}
-        </tbody>
-      </table>
+      <div class='alert-table-wrapper'>
+        <table class="prom-alerts-table">
+          <tbody>        
+            {{#each attrs.alerts as |alert|}}
+              {{alert-receiver-row alert=alert showDescription=this.transformed.showDescriptionColumn}}
+            {{/each}}
+          </tbody>
+        </table>
+      </div>
     {{/unless}}
   `,
 
diff --git a/assets/stylesheets/topic-post.scss b/assets/stylesheets/topic-post.scss
index a202316..0075220 100644
--- a/assets/stylesheets/topic-post.scss
+++ b/assets/stylesheets/topic-post.scss
@@ -53,11 +53,16 @@
     }
   }
 
+  .alert-table-wrapper {
+    overflow-x: auto;
+  }
+
   .alert-receiver-table {
     width: 100%;
     border: 1px solid var(--primary-low);
     border-radius: 3px;
     background-color: var(--secondary);
+    margin: 1em 0;
   }
 
   tbody {

GitHub sha: e1fab84c

1 Like