From 600585bfd3b7a29f87b7d9d3e1e8da9cf387568b Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Wed, 12 Mar 2025 02:02:18 +0200
Subject: [PATCH] style(next)/ribbon/file properties: improve the layout

---
 src/public/stylesheets/theme-next/ribbon.css | 82 +++++++++++++-------
 1 file changed, 56 insertions(+), 26 deletions(-)

diff --git a/src/public/stylesheets/theme-next/ribbon.css b/src/public/stylesheets/theme-next/ribbon.css
index fe83aad34..82aae5857 100644
--- a/src/public/stylesheets/theme-next/ribbon.css
+++ b/src/public/stylesheets/theme-next/ribbon.css
@@ -1,3 +1,32 @@
+@container info-section (max-width: 800px) {
+    table, tbody, tr, td, th {
+        display: block;
+        padding: 0 !important;
+    }
+
+    tbody {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+    }
+
+    tr {
+        flex-grow: 1;
+    }
+
+    tr:has(.file-buttons) {
+        width: 100%;
+    }
+
+    th {
+        font-size: .85em;
+    }
+
+    td {
+        margin-bottom: .5em;
+    }
+}
+
 /*
  * Promoted attributes
  */
@@ -7,6 +36,30 @@ div.promoted-attributes-container {
     margin-bottom: 8px;
 }
 
+/*
+ * File Properties
+ */
+
+.file-properties-widget {
+    container: info-section / inline-size;
+}
+
+.file-properties-widget .file-table {
+    margin: 12px;
+    width: unset;
+}
+
+.file-properties-widget .file-buttons {
+    padding: 0;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    gap: 12px;
+}
+
+.file-properties-widget .file-buttons button {
+    white-space: nowrap;
+}
+
 /*
  * Basic properties
  */
@@ -69,7 +122,8 @@ div.editability-dropdown a.dropdown-item {
  * Note info
  */
 
-.note-info-widget-table th {
+.note-info-widget-table th,
+.file-properties-widget .file-table th {
     opacity: 0.65;
     font-weight: 500;
 }
@@ -82,31 +136,7 @@ div.editability-dropdown a.dropdown-item {
 
 /* 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;
-    }
+    container: info-section / inline-size;
 }
 
 /*