From ee40bb3b3323f97d45f3a5094bf826ebe65005f3 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Tue, 4 Mar 2025 00:55:24 +0200
Subject: [PATCH] style(next)/ribbon/note info: improve the layout on
 constrained width

---
 src/public/stylesheets/theme-next/ribbon.css | 29 ++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/src/public/stylesheets/theme-next/ribbon.css b/src/public/stylesheets/theme-next/ribbon.css
index 7ecb0dc86..fe83aad34 100644
--- a/src/public/stylesheets/theme-next/ribbon.css
+++ b/src/public/stylesheets/theme-next/ribbon.css
@@ -80,6 +80,35 @@ div.editability-dropdown a.dropdown-item {
     font-size: 0.8em;
 }
 
+/* Narrow width layout */
+.note-info-widget {
+    container: note-info / inline-size;
+}
+
+@container note-info (max-width: 800px) {
+    table, tbody, tr, td, th {
+        display: block;
+        padding: 0 !important;
+    }
+
+    tbody {
+        display: flex;
+        gap: 10px;
+    }
+
+    tr {
+        flex-grow: 1;
+    }
+
+    th {
+        font-size: .85em;
+    }
+
+    td {
+        margin-bottom: .5em;
+    }
+}
+
 /*
  * Attribute detail dialog
  */