From 9c9f9fbe0b148b96b5d3e7cffbe85f27f294d454 Mon Sep 17 00:00:00 2001
From: McElwain <sean.mcelwain@outlook.com>
Date: Sat, 25 Apr 2026 11:30:48 -0500
Subject: [PATCH] feat: refine mobile document detail controls

---
 app/static/app.css                  | 501 ++++++++++++++++++++++++++++
 app/templates/base.html             |   2 +-
 app/templates/documents/detail.html |  62 ++--
 3 files changed, 535 insertions(+), 30 deletions(-)

diff --git a/app/static/app.css b/app/static/app.css
index 635fcec..548dff7 100644
--- a/app/static/app.css
+++ b/app/static/app.css
@@ -3718,3 +3718,504 @@ table {
   }
 }
 /* ===== end unified top card controls ===== */
+
+
+/* ===== flags + document type one row ===== */
+@media (max-width: 900px) {
+  .detail-doc-actions-row {
+    display: flex !important;
+    flex-wrap: nowrap !important;
+    align-items: end !important;
+    gap: 0.10rem !important;
+    width: 100% !important;
+    overflow-x: auto !important;
+    padding-bottom: 0.02rem !important;
+  }
+
+  .unified-top-form {
+    display: flex !important;
+    flex-wrap: nowrap !important;
+    align-items: end !important;
+    gap: 0.10rem !important;
+    flex: 1 1 auto !important;
+    min-width: max-content !important;
+    margin: 0 !important;
+  }
+
+  .detail-type-input-wrap {
+    flex: 1 1 13rem !important;
+    min-width: 11rem !important;
+    max-width: none !important;
+  }
+
+  .detail-type-input-wrap input {
+    width: 100% !important;
+    min-width: 0 !important;
+  }
+
+  .detail-check-inline {
+    flex: 0 0 auto !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    white-space: nowrap !important;
+    margin: 0 !important;
+  }
+
+  .unified-flags-form {
+    display: inline-flex !important;
+    flex: 0 0 auto !important;
+    align-items: end !important;
+    margin: 0 !important;
+  }
+}
+/* ===== end flags + document type one row ===== */
+
+
+/* ===== stack approved/excluded ===== */
+@media (max-width: 900px) {
+  .unified-top-form {
+    display: flex !important;
+    flex-wrap: nowrap !important;
+    align-items: end !important;
+    gap: 0.10rem !important;
+    min-width: max-content !important;
+  }
+
+  .detail-type-input-wrap {
+    flex: 1 1 12rem !important;
+    min-width: 10.5rem !important;
+  }
+
+  .detail-doc-type-form .detail-check-inline:nth-of-type(1),
+  .detail-doc-type-form .detail-check-inline:nth-of-type(2) {
+    margin: 0 !important;
+  }
+
+  .detail-doc-type-form {
+    align-items: end !important;
+  }
+
+  .detail-doc-type-form::after {
+    content: "";
+    display: block;
+  }
+
+  .detail-doc-type-form .detail-check-inline {
+    font-size: 0.70rem !important;
+    line-height: 1 !important;
+  }
+
+  .detail-doc-type-form .detail-check-inline input[type="checkbox"] {
+    width: 0.88rem !important;
+    height: 0.88rem !important;
+  }
+
+  /* stack the two flags in a compact column */
+  .detail-doc-type-form .detail-check-inline:nth-of-type(1) {
+    align-self: center !important;
+  }
+
+  .detail-doc-type-form .detail-check-inline:nth-of-type(2) {
+    align-self: center !important;
+  }
+
+  .detail-doc-type-form .detail-check-inline:nth-of-type(1),
+  .detail-doc-type-form .detail-check-inline:nth-of-type(2) {
+    display: flex !important;
+  }
+
+  .detail-doc-type-form .detail-check-inline:nth-of-type(1) {
+    margin-bottom: -0.10rem !important;
+  }
+
+  .detail-doc-type-form .detail-check-inline:nth-of-type(2) {
+    margin-top: -0.10rem !important;
+  }
+
+  .detail-doc-type-form {
+    position: relative !important;
+  }
+
+  .detail-doc-type-form .detail-check-inline:nth-of-type(1),
+  .detail-doc-type-form .detail-check-inline:nth-of-type(2) {
+    flex: 0 0 auto !important;
+  }
+
+  .detail-doc-type-form .detail-check-inline:nth-of-type(1) span,
+  .detail-doc-type-form .detail-check-inline:nth-of-type(2) span {
+    white-space: nowrap !important;
+  }
+
+  /* wrap only the two checks into a visual stacked column */
+  .detail-doc-type-form .detail-check-inline:nth-of-type(1) {
+    order: 2 !important;
+  }
+
+  .detail-doc-type-form .detail-check-inline:nth-of-type(2) {
+    order: 3 !important;
+  }
+
+  .detail-doc-type-form > button[type="submit"] {
+    order: 4 !important;
+  }
+
+  .detail-type-input-wrap {
+    order: 1 !important;
+  }
+
+  .detail-doc-type-form {
+    display: grid !important;
+    grid-template-columns: minmax(10.5rem, 1fr) auto auto !important;
+    grid-template-rows: auto auto !important;
+    column-gap: 0.10rem !important;
+    row-gap: 0.04rem !important;
+    align-items: center !important;
+  }
+
+  .detail-type-input-wrap {
+    grid-column: 1 !important;
+    grid-row: 1 / span 2 !important;
+  }
+
+  .detail-doc-type-form .detail-check-inline:nth-of-type(1) {
+    grid-column: 2 !important;
+    grid-row: 1 !important;
+  }
+
+  .detail-doc-type-form .detail-check-inline:nth-of-type(2) {
+    grid-column: 2 !important;
+    grid-row: 2 !important;
+  }
+
+  .detail-doc-type-form > button[type="submit"] {
+    grid-column: 3 !important;
+    grid-row: 1 / span 2 !important;
+    align-self: center !important;
+  }
+}
+/* ===== end stack approved/excluded ===== */
+
+
+/* ===== swap update and stacked flags ===== */
+@media (max-width: 900px) {
+  .detail-doc-type-form {
+    display: grid !important;
+    grid-template-columns: minmax(10.5rem, 1fr) auto auto !important;
+    grid-template-rows: auto auto !important;
+    column-gap: 0.10rem !important;
+    row-gap: 0.04rem !important;
+    align-items: center !important;
+  }
+
+  .detail-type-input-wrap {
+    grid-column: 1 !important;
+    grid-row: 1 / span 2 !important;
+  }
+
+  .detail-doc-type-form > button[type="submit"] {
+    grid-column: 2 !important;
+    grid-row: 1 / span 2 !important;
+    align-self: center !important;
+  }
+
+  .detail-doc-type-form .detail-check-inline:nth-of-type(1) {
+    grid-column: 3 !important;
+    grid-row: 1 !important;
+  }
+
+  .detail-doc-type-form .detail-check-inline:nth-of-type(2) {
+    grid-column: 3 !important;
+    grid-row: 2 !important;
+  }
+}
+/* ===== end swap update and stacked flags ===== */
+
+
+/* ===== top row alignment polish ===== */
+@media (max-width: 900px) {
+  .detail-doc-actions-row {
+    align-items: start !important;
+  }
+
+  .detail-doc-type-form {
+    display: grid !important;
+    grid-template-columns: minmax(11.5rem, 1fr) auto auto auto !important;
+    grid-template-rows: auto auto !important;
+    column-gap: 0.12rem !important;
+    row-gap: 0.06rem !important;
+    align-items: center !important;
+    width: 100% !important;
+  }
+
+  .detail-type-input-wrap {
+    grid-column: 1 !important;
+    grid-row: 1 / span 2 !important;
+    min-width: 0 !important;
+  }
+
+  .detail-type-input-wrap label {
+    margin-bottom: 0.08rem !important;
+  }
+
+  .detail-type-input-wrap input {
+    height: 1.72rem !important;
+  }
+
+  .detail-doc-type-form > button[type="submit"] {
+    grid-column: 2 !important;
+    grid-row: 1 / span 2 !important;
+    align-self: center !important;
+    justify-self: start !important;
+    margin: 0 !important;
+  }
+
+  .detail-doc-type-form .detail-check-inline:nth-of-type(1) {
+    grid-column: 3 !important;
+    grid-row: 1 !important;
+    align-self: end !important;
+    justify-self: start !important;
+    margin: 0 !important;
+  }
+
+  .detail-doc-type-form .detail-check-inline:nth-of-type(2) {
+    grid-column: 3 !important;
+    grid-row: 2 !important;
+    align-self: start !important;
+    justify-self: start !important;
+    margin: 0 !important;
+  }
+
+  .detail-review-flags-form {
+    display: inline-flex !important;
+    align-items: center !important;
+    align-self: center !important;
+    margin-top: 1.02rem !important;
+    margin-left: 0.04rem !important;
+  }
+
+  .detail-review-flags-form button {
+    margin: 0 !important;
+  }
+
+  .detail-check-inline {
+    min-height: 0 !important;
+    height: auto !important;
+  }
+
+  .detail-check-inline span {
+    display: inline-block !important;
+    transform: translateY(-0.01rem) !important;
+  }
+
+  .detail-check-inline input[type="checkbox"] {
+    transform: translateY(0.01rem) !important;
+  }
+}
+/* ===== end top row alignment polish ===== */
+
+
+
+
+/* ===== align update with save flags ===== */
+@media (max-width: 900px) {
+  .detail-doc-type-form {
+    display: grid !important;
+    grid-template-columns: minmax(11.5rem, 1fr) auto auto !important;
+    grid-template-rows: auto auto !important;
+    column-gap: 0.12rem !important;
+    row-gap: 0.06rem !important;
+    align-items: center !important;
+    width: 100% !important;
+  }
+
+  .detail-type-input-wrap {
+    grid-column: 1 !important;
+    grid-row: 1 / span 2 !important;
+    min-width: 0 !important;
+  }
+
+  .detail-doc-type-form > button[type="submit"] {
+    grid-column: 2 !important;
+    grid-row: 1 / span 2 !important;
+    align-self: center !important;
+    justify-self: start !important;
+    margin: 0 !important;
+  }
+
+  .detail-doc-type-form .detail-check-inline:nth-of-type(1) {
+    grid-column: 3 !important;
+    grid-row: 1 !important;
+    align-self: end !important;
+    justify-self: start !important;
+    margin: 0 !important;
+  }
+
+  .detail-doc-type-form .detail-check-inline:nth-of-type(2) {
+    grid-column: 3 !important;
+    grid-row: 2 !important;
+    align-self: start !important;
+    justify-self: start !important;
+    margin: 0 !important;
+  }
+
+  .detail-review-flags-form {
+    display: inline-flex !important;
+    align-items: center !important;
+    align-self: center !important;
+    margin: 0 !important;
+    padding-top: 1.02rem !important;
+  }
+
+  .detail-review-flags-form button {
+    margin: 0 !important;
+  }
+}
+/* ===== end align update with save flags ===== */
+
+
+/* ===== level update and save-flags buttons ===== */
+@media (max-width: 900px) {
+  .detail-doc-actions-row {
+    align-items: start !important;
+  }
+
+  .detail-doc-type-form {
+    display: grid !important;
+    grid-template-columns: minmax(11.5rem, 1fr) auto auto !important;
+    grid-template-rows: auto auto !important;
+    column-gap: 0.12rem !important;
+    row-gap: 0.02rem !important;
+    align-items: center !important;
+    width: 100% !important;
+  }
+
+  .detail-type-input-wrap {
+    grid-column: 1 !important;
+    grid-row: 1 / span 2 !important;
+    min-width: 0 !important;
+  }
+
+  .detail-doc-type-form > button[type="submit"] {
+    grid-column: 2 !important;
+    grid-row: 1 / span 2 !important;
+    align-self: center !important;
+    justify-self: start !important;
+    margin: 0 !important;
+    transform: translateY(0.10rem) !important;
+  }
+
+  .detail-doc-type-form .detail-check-inline:nth-of-type(1) {
+    grid-column: 3 !important;
+    grid-row: 1 !important;
+    align-self: end !important;
+    justify-self: start !important;
+    margin: 0 !important;
+  }
+
+  .detail-doc-type-form .detail-check-inline:nth-of-type(2) {
+    grid-column: 3 !important;
+    grid-row: 2 !important;
+    align-self: start !important;
+    justify-self: start !important;
+    margin: 0 !important;
+  }
+
+  .detail-review-flags-form {
+    display: inline-flex !important;
+    align-items: center !important;
+    align-self: start !important;
+    margin: 0 !important;
+    padding-top: 0 !important;
+    transform: translateY(1.12rem) !important;
+  }
+
+  .detail-review-flags-form button {
+    margin: 0 !important;
+  }
+}
+/* ===== end level update and save-flags buttons ===== */
+
+
+/* ===== save flags same grid as update ===== */
+@media (max-width: 900px) {
+  .detail-doc-actions-row {
+    display: block !important;
+    margin-bottom: 0.10rem !important;
+  }
+
+  .detail-doc-actions-grid {
+    display: grid !important;
+    grid-template-columns: minmax(11.5rem, 1fr) auto auto auto !important;
+    grid-template-rows: auto auto !important;
+    column-gap: 0.12rem !important;
+    row-gap: 0.04rem !important;
+    align-items: center !important;
+    width: 100% !important;
+  }
+
+  .detail-doc-type-form {
+    display: contents !important;
+  }
+
+  .detail-type-input-wrap {
+    grid-column: 1 !important;
+    grid-row: 1 / span 2 !important;
+    min-width: 0 !important;
+  }
+
+  .detail-type-input-wrap input {
+    width: 100% !important;
+  }
+
+  .detail-update-button {
+    grid-column: 2 !important;
+    grid-row: 1 / span 2 !important;
+    align-self: center !important;
+    justify-self: start !important;
+    margin: 0 !important;
+  }
+
+  .detail-flags-stack {
+    grid-column: 3 !important;
+    grid-row: 1 / span 2 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: center !important;
+    gap: 0.08rem !important;
+    align-self: center !important;
+  }
+
+  .detail-saveflags-button {
+    grid-column: 4 !important;
+    grid-row: 1 / span 2 !important;
+    align-self: center !important;
+    justify-self: start !important;
+    margin: 0 !important;
+  }
+
+  .detail-review-flags-form {
+    display: contents !important;
+    margin: 0 !important;
+  }
+
+  .detail-check-inline {
+    display: inline-flex !important;
+    align-items: center !important;
+    gap: 0.20rem !important;
+    white-space: nowrap !important;
+    font-size: 0.72rem !important;
+    line-height: 1 !important;
+    margin: 0 !important;
+  }
+
+  .detail-check-inline input[type="checkbox"] {
+    width: 0.92rem !important;
+    height: 0.92rem !important;
+    margin: 0 !important;
+  }
+}
+/* ===== end save flags same grid as update ===== */
+
+
+
+
diff --git a/app/templates/base.html b/app/templates/base.html
index c516de3..e701e72 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{% block title %}Document Processor{% endblock %}</title>
-    <link rel="stylesheet" href="/static/app.css?v=87">
+    <link rel="stylesheet" href="/static/app.css?v=99">
     <link rel="stylesheet" href="/static/app-shell.css?v=66">
 </head>
 <body>
diff --git a/app/templates/documents/detail.html b/app/templates/documents/detail.html
index 2973363..8d98cd6 100644
--- a/app/templates/documents/detail.html
+++ b/app/templates/documents/detail.html
@@ -47,40 +47,44 @@
             </div>            <div class="card" style="margin-bottom: 0;">
                 <div style="display:flex; flex-direction:column; gap:0.75rem;">
                     
+                    
                     <div class="detail-doc-actions-row">
-                        <form method="post" action="/documents/{{ document.document_id }}/save-document-type" class="detail-doc-type-form unified-top-form">
-                            <div class="detail-type-input-wrap" style="position:relative;">
-                                <label for="document_type_input">Document type</label>
-                                <input
-                                    id="document_type_input"
-                                    type="text"
-                                    name="document_type"
-                                    value="{{ document.document_type or '' }}"
-                                    placeholder="receipt"
-                                    autocomplete="off"
-                                    style="min-width:160px; max-width:260px;"
-                                >
-                                <div id="document-type-suggestions" style="display:none; position:absolute; top:100%; left:0; right:0; z-index:20; background:#fff; border:1px solid #d7dce5; border-radius:12px; margin-top:0.35rem; max-height:220px; overflow-y:auto; box-shadow:0 10px 24px rgba(15,23,42,0.10);"></div>
+                        <div class="detail-doc-actions-grid">
+                            <form method="post" action="/documents/{{ document.document_id }}/save-document-type" class="detail-doc-type-form">
+                                <div class="detail-type-input-wrap" style="position:relative;">
+                                    <label for="document_type_input">Document type</label>
+                                    <input
+                                        id="document_type_input"
+                                        type="text"
+                                        name="document_type"
+                                        value="{{ document.document_type or '' }}"
+                                        placeholder="receipt"
+                                        autocomplete="off"
+                                        style="min-width:160px; max-width:260px;"
+                                    >
+                                    <div id="document-type-suggestions" style="display:none; position:absolute; top:100%; left:0; right:0; z-index:20; background:#fff; border:1px solid #d7dce5; border-radius:12px; margin-top:0.35rem; max-height:220px; overflow-y:auto; box-shadow:0 10px 24px rgba(15,23,42,0.10);"></div>
+                                </div>
+                                <button type="submit" class="top-pill-button detail-update-button" style="height:38px;">Update</button>
+                            </form>
+
+                            <div class="detail-flags-stack">
+                                <label class="detail-check-label detail-check-inline">
+                                    <input type="checkbox" form="save-review-flags-form" name="is_approved" value="1" {% if review_state and review_state.is_approved %}checked{% endif %}>
+                                    <span>Approved</span>
+                                </label>
+                                <label class="detail-check-label detail-check-inline">
+                                    <input type="checkbox" form="save-review-flags-form" name="is_excluded" value="1" {% if review_state and review_state.is_excluded %}checked{% endif %}>
+                                    <span>Excluded</span>
+                                </label>
                             </div>
 
-                            <label class="detail-check-label detail-check-inline">
-                                <input type="checkbox" name="is_approved" value="1" {% if review_state and review_state.is_approved %}checked{% endif %}>
-                                <span>Approved</span>
-                            </label>
-
-                            <label class="detail-check-label detail-check-inline">
-                                <input type="checkbox" name="is_excluded" value="1" {% if review_state and review_state.is_excluded %}checked{% endif %}>
-                                <span>Excluded</span>
-                            </label>
-
-                            <button type="submit" class="top-pill-button">Update</button>
-                        </form>
-
-                        <form method="post" action="/documents/{{ document.document_id }}/save-review-flags" class="detail-review-flags-form unified-flags-form">
-                            <button type="submit" class="top-pill-button">Save flags</button>
-                        </form>
+                            <form method="post" action="/documents/{{ document.document_id }}/save-review-flags" class="detail-review-flags-form" id="save-review-flags-form">
+                                <button type="submit" class="top-pill-button detail-saveflags-button" style="height:38px;">Save flags</button>
+                            </form>
+                        </div>
                     </div>
 
+
                     <form method="post" action="/documents/{{ document.document_id }}/save-pdf" class="detail-save-pdf-form" style="display:flex; align-items:flex-end; gap:0.6rem; flex-wrap:wrap; margin:0;">
                         <div class="detail-path-row" style="display:flex; align-items:flex-end; gap:0.6rem; width:100%; flex-wrap:nowrap;">
                             <div style="flex:1; min-width:260px;">