From b8a9a3f731362c80e9c8cdfaa881185992b3fe26 Mon Sep 17 00:00:00 2001
From: McElwain <sean.mcelwain@outlook.com>
Date: Thu, 28 May 2026 21:37:14 -0500
Subject: [PATCH] Split layout review tools into two toolbar rows

---
 app/static/app.css                  | 26 ++++++++++++++++++++++++++
 app/templates/documents/detail.html | 14 ++++++++------
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/app/static/app.css b/app/static/app.css
index de50d28..20e31b8 100644
--- a/app/static/app.css
+++ b/app/static/app.css
@@ -6282,3 +6282,29 @@ table {
   width: 100% !important;
   max-width: 100% !important;
 }
+
+/* Layout Review toolbar: split selection tools into two compact rows */
+#layout-review-toolbar .word-ribbon-group:first-child {
+  gap: 0.35rem;
+}
+
+#layout-review-toolbar .layout-tool-row {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 0.4rem;
+  align-items: center;
+  width: 100%;
+}
+
+#layout-review-toolbar .layout-tool-row .layout-tool-btn {
+  flex: 1 1 0;
+  min-width: 0;
+  white-space: nowrap;
+}
+
+@media (max-width: 760px) {
+  #layout-review-toolbar .layout-tool-row .layout-tool-btn {
+    padding-left: 0.55rem;
+    padding-right: 0.55rem;
+  }
+}
diff --git a/app/templates/documents/detail.html b/app/templates/documents/detail.html
index 7dde3bc..4d57b08 100644
--- a/app/templates/documents/detail.html
+++ b/app/templates/documents/detail.html
@@ -1904,17 +1904,19 @@ document.addEventListener("DOMContentLoaded", () => {
 
       <div id="layout-review-toolbar" class="word-ribbon-toolbar">
       <div class="word-ribbon-group">
-        <div class="word-ribbon-row">
-          <button type="button" class="layout-tool-btn active" id="layout-tool-select">Select</button>
+          <div class="word-ribbon-row layout-tool-row">
+            <button type="button" class="layout-tool-btn active" id="layout-tool-select">Select</button>
             <button type="button" class="layout-tool-btn" id="layout-select-all">Select All</button>
             <button type="button" class="layout-tool-btn" id="layout-multi-select">Multi</button>
             <button type="button" class="layout-tool-btn" id="layout-clear-selection">Clear</button>
             <button type="button" class="layout-tool-btn" id="layout-invert-selection">Invert</button>
+          </div>
+          <div class="word-ribbon-row layout-tool-row">
             <button type="button" class="layout-tool-btn" id="layout-select-line">Line</button>
-          <button type="button" class="layout-tool-btn" id="layout-tool-pan">Pan</button>
-          <button type="button" class="layout-tool-btn" id="layout-tool-add">Add</button>
-          <button type="button" class="layout-tool-btn danger" id="layout-delete-word">Delete</button>
-        </div>
+            <button type="button" class="layout-tool-btn" id="layout-tool-pan">Pan</button>
+            <button type="button" class="layout-tool-btn" id="layout-tool-add">Add</button>
+            <button type="button" class="layout-tool-btn danger" id="layout-delete-word">Delete</button>
+          </div>
         <div class="word-ribbon-label">Tools</div>
       </div>