Add overflow-x: auto to tables

w4 · Jan 21, 2024 · 235951b · 235951b
1 parent a254a4a
commit 235951b
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 1 deletion.
diff --git a/statics/sass/tables.scss b/statics/sass/tables.scss
@@ -1,12 +1,27 @@
 @import 'colours';
 
+.table-responsive {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+}
+
 table {
   @media (prefers-color-scheme: dark) {
     color: darken($darkModeHighlightColour, 20%);
   }
 
   border-collapse: collapse;
 
+  th, td {
+    white-space: nowrap;
+    padding-right: 10px;
+
+    &:last-of-type {
+      padding-right: 0;
+    }
+  }
+
   th {
     text-align: left;
   }

diff --git a/templates/base.html b/templates/base.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>{% block title %}rgit{% endblock %}</title>
     <link rel="stylesheet" type="text/css" href="/style-{{ crate::GLOBAL_CSS_HASH.as_ref() }}.css" />
     {%- block head -%}{%- endblock %}

diff --git a/templates/index.html b/templates/index.html
@@ -1,6 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
+    <div class="table-responsive">
     <table class="repositories">
         <thead>
         <tr>
@@ -53,4 +54,5 @@
         {%- endfor %}
         </tbody>
     </table>
+    </div>
 {% endblock %}
diff --git a/templates/repo/commit.html b/templates/repo/commit.html
@@ -9,6 +9,7 @@
 {% block commit_nav_class %}active{% endblock %}
 
 {% block content %}
+<div class="table-responsive">
 <table class="commit-info">
     <tbody>
     <tr>
@@ -41,6 +42,7 @@
     </tr>
     </tbody>
 </table>
+</div>
 
 <h2>{{ commit.summary() }}</h2>
 <pre>{{ commit.body() }}</pre>

diff --git a/templates/repo/log.html b/templates/repo/log.html
@@ -5,9 +5,11 @@
 {% block log_nav_class %}active{% endblock %}
 
 {% block content %}
+<div class="table-responsive">
 <table class="repositories">
     {% call refs::commit_table(commits) %}
 </table>
+</div>
 
 {% if let Some(next_offset) = next_offset %}
 <div class="mt-2 text-center">

diff --git a/templates/repo/refs.html b/templates/repo/refs.html
@@ -4,6 +4,7 @@
 {% block refs_nav_class %}active{% endblock %}
 
 {% block content %}
+<div class="table-responsive">
 <table class="repositories">
     {% call refs::branch_table(refs.heads) %}
 
@@ -20,4 +21,5 @@
     {%- call refs::tag_table(refs.tags) -%}
     {%- endif %}
 </table>
+</div>
 {% endblock %}
diff --git a/templates/repo/summary.html b/templates/repo/summary.html
@@ -4,6 +4,7 @@
 {% block summary_nav_class %}active{% endblock %}
 
 {% block content %}
+<div class="table-responsive">
 <table class="repositories">
     {% call refs::branch_table(refs.heads.iter().take(10)) %}
     {%- if refs.heads.len() > 10 -%}
@@ -61,4 +62,5 @@
     </tbody>
     {%- endif %}
 </table>
+</div>
 {% endblock %}
diff --git a/templates/repo/tag.html b/templates/repo/tag.html
@@ -2,6 +2,7 @@
 {% extends "repo/base.html" %}
 
 {% block content %}
+<div class="table-responsive">
 <table class="commit-info">
     <tbody>
     <tr>
@@ -37,6 +38,7 @@
     </tr>
     </tbody>
 </table>
+</div>
 
 <pre class="h2-first-line">{{ tag.message }}</pre>
 {% endblock %}
diff --git a/templates/repo/tree.html b/templates/repo/tree.html
@@ -3,6 +3,7 @@
 {% block tree_nav_class %}active{% endblock %}
 
 {% block content %}
+<div class="table-responsive">
 <table class="repositories">
     <thead>
     <tr>
@@ -32,4 +33,5 @@
     {% endfor -%}
     </tbody>
 </table>
+</div>
 {% endblock %}