Stop tables causing an overflow on mobile devices

opensafely-core · May 23, 2024 · 7016fe0 · 7016fe0
1 parent 25bd4b6
commit 7016fe0
Show file tree

Hide file tree

Showing 11 changed files with 11 additions and 11 deletions.
diff --git a/templates/_components/index.html b/templates/_components/index.html
@@ -835,7 +835,7 @@ <h2>Tables</h2>
       <div class="not-prose flex flex-col gap-y-8 relative w-screen max-w-5xl left-1/2 -translate-x-1/2 p-8 bg-slate-200 border border-slate-500 rounded">
         <div class="flex flex-row gap-x-8 items-center">
           {% #card class="w-full" no_container=True %}
-            <div class="inline-block min-w-full align-middle overflow-x-auto max-w-full">
+            <div class="relative inline-block min-w-full align-middle overflow-x-auto max-w-full">
               {% #table id="customTable" %}
                 {% #table_head class="bg-slate-200" %}
                   {% #table_row %}

diff --git a/templates/_partials/latest-job-requests-table.html b/templates/_partials/latest-job-requests-table.html
@@ -3,7 +3,7 @@
 {% url "job-list" as job_list_url %}
 <div id="events" class="max-w-[1500px] w-full mx-auto">
   {% #card class="mx-4" no_container=True title="Latest job requests" subtitle="Most recent job requests on the OpenSAFELY platform" button=True button_text="View all job requests" button_href=job_list_url %}
-    <div class="overflow-hidden px-4 py-2 border-t border-slate-200 md:px-6">
+    <div class="relative overflow-hidden px-4 py-2 border-t border-slate-200 md:px-6">
       <div class="flow-root">
         <div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
           <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">

diff --git a/templates/job_request/list.html b/templates/job_request/list.html
@@ -46,7 +46,7 @@
 {% block full_width_content %}
   <div class="mx-4 lg:mx-6 xl:mx-8">
     {% #card no_container=True %}
-      <div class="inline-block min-w-full align-middle overflow-x-auto max-w-full">
+      <div class="relative inline-block min-w-full align-middle overflow-x-auto max-w-full">
         {% #table %}
           {% #table_head class="bg-slate-200" %}
             {% #table_row %}

diff --git a/templates/org/event_log.html b/templates/org/event_log.html
@@ -23,7 +23,7 @@
 {% block full_width_content %}
   <div class="mx-4 lg:mx-6 xl:mx-8">
     {% #card no_container=True %}
-      <div class="inline-block min-w-full align-middle overflow-x-auto max-w-full">
+      <div class="relative inline-block min-w-full align-middle overflow-x-auto max-w-full">
         {% #table %}
           {% #table_head class="bg-slate-200" %}
             {% #table_row %}

diff --git a/templates/project/event_log.html b/templates/project/event_log.html
@@ -21,7 +21,7 @@
 {% block full_width_content %}
   <div class="mx-4 lg:mx-6 xl:mx-8">
     {% #card no_container=True %}
-      <div class="inline-block min-w-full align-middle overflow-x-auto max-w-full">
+      <div class="relative inline-block min-w-full align-middle overflow-x-auto max-w-full">
         {% #table %}
           {% #table_head class="bg-slate-200" %}
             {% #table_row %}

diff --git a/templates/staff/dashboards/copiloting.html b/templates/staff/dashboards/copiloting.html
@@ -19,7 +19,7 @@
 {% block full_width_content %}
   <div class="mx-4 lg:mx-6 xl:mx-8">
     {% #card no_container=True %}
-      <div class="inline-block min-w-full align-middle overflow-x-auto max-w-full">
+      <div class="relative inline-block min-w-full align-middle overflow-x-auto max-w-full">
         {% #table id="customTable" %}
           {% #table_head class="bg-slate-200" %}
             {% #table_row %}

diff --git a/templates/staff/dashboards/projects.html b/templates/staff/dashboards/projects.html
@@ -19,7 +19,7 @@
 {% block full_width_content %}
   <div class="mx-4 lg:mx-6 xl:mx-8">
     {% #card no_container=True %}
-      <div class="inline-block min-w-full align-middle overflow-x-auto max-w-full">
+      <div class="relative inline-block min-w-full align-middle overflow-x-auto max-w-full">
         {% #table id="customTable" %}
           {% #table_head class="bg-slate-200" %}
             {% #table_row %}

diff --git a/templates/staff/dashboards/repos.html b/templates/staff/dashboards/repos.html
@@ -19,7 +19,7 @@
 {% block full_width_content %}
   <div class="mx-4 lg:mx-6 xl:mx-8">
     {% #card no_container=True %}
-      <div class="inline-block min-w-full align-middle overflow-x-auto max-w-full">
+      <div class="relative inline-block min-w-full align-middle overflow-x-auto max-w-full">
         {% #table id="customTable" %}
           {% #table_head class="bg-slate-200" %}
             {% #table_row %}

diff --git a/templates/staff/dashboards/repos_with_multiple_projects.html b/templates/staff/dashboards/repos_with_multiple_projects.html
@@ -22,7 +22,7 @@
 {% block full_width_content %}
   <div class="mx-4 lg:mx-6 xl:mx-8">
     {% #card no_container=True %}
-      <div class="inline-block min-w-full align-middle overflow-x-auto max-w-full">
+      <div class="relative inline-block min-w-full align-middle overflow-x-auto max-w-full">
         {% #table id="customTable" %}
           {% #table_head class="bg-slate-200" %}
             {% #table_row %}

diff --git a/templates/user/event_log.html b/templates/user/event_log.html
@@ -32,7 +32,7 @@
   <div class="mx-4 lg:mx-6 xl:mx-8">
     {% if page_obj %}
     {% #card no_container=True %}
-      <div class="inline-block min-w-full align-middle overflow-x-auto max-w-full">
+      <div class="relative inline-block min-w-full align-middle overflow-x-auto max-w-full">
         {% #table %}
           {% #table_head class="bg-slate-200" %}
             {% #table_row %}

diff --git a/templates/workspace/event_log.html b/templates/workspace/event_log.html
@@ -77,7 +77,7 @@
 {% block full_width_content %}
   {% if page_obj %}
     {% #card no_container=True class="mx-4 lg:mx-6 xl:mx-8" %}
-      <div class="inline-block min-w-full align-middle overflow-x-auto max-w-full">
+      <div class="relative inline-block min-w-full align-middle overflow-x-auto max-w-full">
         {% #table %}
           {% #table_head class="bg-slate-200" %}
             {% #table_row %}