Fix tables overflows.

Sometimes when the text is too long, the page can expand in width, this fixes that
official-stockfish · Feb 26, 2024 · 1209808 · 1209808
1 parent 6577f97
commit 1209808
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 7 deletions.
diff --git a/server/fishtest/static/css/application.css b/server/fishtest/static/css/application.css
@@ -5,6 +5,8 @@
   --bs-link-hover-color: rgb(var(--bs-link-hover-color-rgb));
   --bs-link-focus-color: rgb(73, 116, 73);
   --bs-secondary-color: #6c757d;
+  --sidebar-width: 180px;
+  --scroll-bar-width: 16px;
 }
 
 @media (max-width: 575.98px) {
@@ -38,10 +40,17 @@
 }
 
 @media (min-width: 992px) {
+  section {
+    max-width: calc(
+      100vw - var(--sidebar-width) - var(--bs-gutter-x) -
+        var(--scroll-bar-width)
+    );
+  }
+
   .layout {
     display: grid;
     grid-template-areas: "sidebar main";
-    grid-template-columns: 180px auto;
+    grid-template-columns: var(--sidebar-width) auto;
   }
 
   .mainnavbar {
@@ -108,7 +117,7 @@
 }
 
 ::-webkit-scrollbar {
-  width: 16px;
+  width: var(--scroll-bar-width);
 }
 
 ::-webkit-scrollbar-corner {

diff --git a/server/fishtest/templates/machines.mak b/server/fishtest/templates/machines.mak
@@ -2,6 +2,12 @@
   from fishtest.util import delta_date
   from fishtest.util import diff_date
   from fishtest.util import worker_name
+
+  def clip_long(text, max_length=20):
+      if len(text) > max_length:
+          return text[:max_length] + "..."
+      else:
+          return text
 %>
 
 <table class="table table-striped table-sm">
@@ -30,6 +36,9 @@
         worker_name_ = worker_name(machine, short=True)
         diff_time = diff_date(machine["last_updated"])
         delta_time = delta_date(diff_time)
+        branch = machine['run']['args']['new_tag']
+        task_id = str(machine['task_id'])
+        run_id = str(machine['run']['_id'])
       %>
       <tr>
         <td>${machine['username']}</td>
@@ -48,7 +57,7 @@
         <td>${python_version}</td>
         <td>${version}</td>
         <td>
-          <a href="/tests/view/${str(machine['run']['_id'])+'?show_task='+str(machine['task_id'])}">${machine['run']['args']['new_tag']+"/"+str(machine['task_id'])}</a>
+          <a href="/tests/view/${run_id + '?show_task=' + task_id}" title="${branch + "/" + task_id}">${clip_long(branch) + "/" + task_id}</a>
         </td>
         <td>${delta_time}</td>
       </tr>

diff --git a/server/fishtest/templates/run_table.mak b/server/fishtest/templates/run_table.mak
@@ -46,7 +46,7 @@
 % endif
 </h4>
 
-<div
+<section
   id="${toggle}"
 % if toggle:
   class="${'collapse show' if get_cookie(request, cookie_name)=='Hide' else 'collapse'}"
@@ -144,4 +144,4 @@
     </table>
   </div>
   <%include file="pagination.mak" args="pages=pages"/>
-</div>
+</section>
diff --git a/server/fishtest/templates/tests.mak b/server/fishtest/templates/tests.mak
@@ -117,7 +117,7 @@
     min_height = str(37) + "px"
     max_height = str(34.7) + "vh"
   %>
-  <div id="machines"
+  <section id="machines"
       class="overflow-auto ${'collapse show' if machines_shown else 'collapse'}">
       <div class="ssc-card ssc-wrapper">
         <div class="ssc-head-line"></div>

diff --git a/server/fishtest/templates/tests_view.mak b/server/fishtest/templates/tests_view.mak
@@ -400,7 +400,7 @@
       </a>
     Tasks ${totals}
   </h4>
-  <div id="tasks"
+  <section id="tasks"
        class="overflow-auto ${'collapse show' if tasks_shown else 'collapse'}">
     <table class='table table-striped table-sm'>
       <thead id="tasks-head" class="sticky-top">