feat: trim the statuses if they're over 20 characters long

zendesk · Apr 26, 2022 · 89abe72 · 89abe72
1 parent a8cc2ea
commit 89abe72
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 4 deletions.
diff --git a/style.css b/style.css
@@ -2803,6 +2803,19 @@ ul {
   background-color: #000;
 }
 
+.status-label-request {
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media (max-width: 768px) {
+  .status-label-request {
+    max-width: 150px;
+  }
+}
+
 /***** Post *****/
 /*
 * The post grid is defined this way:

diff --git a/styles/_status-label.scss b/styles/_status-label.scss
@@ -73,4 +73,14 @@
   &-hold {
     background-color: #000;
   }
+
+  &-request {
+    @include mobile {
+      max-width: 150px;
+    }
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
diff --git a/templates/request_page.hbs b/templates/request_page.hbs
@@ -174,7 +174,7 @@
 
           <dt>{{t 'status'}}</dt>
           <dd>
-            <span class="status-label status-label-{{request.status}}" title="{{request.status_description}}">
+            <span class="status-label status-label-request status-label-{{request.status}}" title="{{request.status_description}}">
               {{request.status_name}}
             </span>
           </dd>

diff --git a/templates/requests_page.hbs b/templates/requests_page.hbs
@@ -97,10 +97,10 @@
                 </a>
 
                 <!-- Visible on mobile -->
-                <div class="requests-table-meta meta-group">
+                <div class="requests-table-meta">
                   <span class="meta-data">#{{id}}</span>
                   <span class="meta-data">{{date created_at timeago=true}}</span>
-                  <span class="status-label status-label-{{status}}" title="{{status_description}}">
+                  <span class="status-label status-label-request status-label-{{status}}" title="{{status_description}}">
                     {{status_name}}
                   </span>
                 </div>
@@ -115,7 +115,7 @@
               </td>
               <td>{{date updated_at timeago=true}}</td>
               <td class="requests-table-status">
-                <span class="status-label status-label-{{status}}" title="{{status_description}}">
+                <span class="status-label status-label-request status-label-{{status}}" title="{{status_description}}">
                   {{status_name}}
                 </span>
               </td>