style(next)/ribbon/note info: improve the layout on constrained width

2025-03-04 00:55:24 +07:00 · 2025-03-04 00:55:24 +07:00 · ee40bb3b33
parent dcea67fa9d
commit ee40bb3b33
1 changed files with 29 additions and 0 deletions
--- 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
 */