From ee1a169121e481900cd8d3ac65682f69105e649f Mon Sep 17 00:00:00 2001
From: Johannes Marbach <n0-0ne+github@mailbox.org>
Date: Tue, 9 Apr 2024 15:31:46 +0200
Subject: [PATCH] Arrange rows in .basic-info tables vertically when horizontal
 space is constrained (#1771)

Co-authored-by: Andrew Morgan <1342360+anoadragon453@users.noreply.github.com>
---
 assets/scss/_styles_project.scss              | 25 +++++++++++++++++++
 .../internal/newsfragments/1771.clarification |  1 +
 2 files changed, 26 insertions(+)
 create mode 100644 changelogs/internal/newsfragments/1771.clarification

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 {
diff --git a/changelogs/internal/newsfragments/1771.clarification b/changelogs/internal/newsfragments/1771.clarification
new file mode 100644
index 00000000..b1941e18
--- /dev/null
+++ b/changelogs/internal/newsfragments/1771.clarification
@@ -0,0 +1 @@
+Arrange rows in `.basic-info` tables vertically when horizontal space is constrained.