From cee42b92a2471c961a3c7697b594bf7e670ca6c1 Mon Sep 17 00:00:00 2001
From: Johannes Marbach <n0-0ne+github@mailbox.org>
Date: Thu, 28 Mar 2024 11:44:13 +0100
Subject: [PATCH] Arrange rows in .basic-info tables vertically when horizontal
 space is constrained

Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>
---
 assets/scss/_styles_project.scss | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index 41cc149f..63953697 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -437,6 +437,31 @@ footer {
     &.basic-info th {
       width: 15rem;
     }
+
+    /* Arrange rows vertically when horizontal space is constrained to avoid overflowing */
+    @include media-breakpoint-down(sm) {
+      /* Make cells full width without vertical margin */
+      &.basic-info th, &.basic-info td {
+        width: 100%;
+        display: inline-block;
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+
+      /* Remove border and padding between header & data cells to make them appear like a single cell */
+      &.basic-info td {
+        padding-top: 0;
+        border-top: none;
+      }
+      &.basic-info th {
+        border-bottom: none;
+      }
+
+      /* Remove top border on all but the first header cell to prevent double borders between rows */
+      &.basic-info tr + tr th {
+        border-top: none;
+      }
+    }
   }
 
   pre {