feat: tighten mobile detail and metadata layouts

app/static/app.css

@@ -4247,3 +4247,369 @@ table {
   }
 }
 /* ===== end center text inside top-row pills ===== */
+
+
+/* ===== tighten document type vs proposed path spacing ===== */
+@media (max-width: 900px) {
+  .detail-doc-actions-row {
+    margin-bottom: 0.02rem !important;
+  }
+
+  .detail-doc-actions-grid {
+    margin-bottom: 0 !important;
+  }
+
+  .detail-sticky-header > .card > div {
+    gap: 0.22rem !important;
+  }
+
+  .detail-type-input-wrap {
+    align-self: end !important;
+    margin-bottom: 0 !important;
+  }
+
+  .detail-type-input-wrap label,
+  .detail-sticky-header form[action$="/save-pdf"] label {
+    margin-bottom: 0.08rem !important;
+  }
+
+  .detail-type-input-wrap input {
+    margin-bottom: 0 !important;
+  }
+
+  .detail-sticky-header form[action$="/save-pdf"] {
+    margin-top: 0 !important;
+    align-items: end !important;
+    gap: 0.10rem !important;
+  }
+
+  .detail-sticky-header form[action$="/save-pdf"] > div:first-child {
+    margin-bottom: 0 !important;
+  }
+
+  #proposed_storage_path_input {
+    margin-bottom: 0 !important;
+  }
+}
+/* ===== end tighten document type vs proposed path spacing ===== */
+
+
+
+
+
+
+
+
+/* ===== lower document-type right controls slightly ===== */
+@media (max-width: 900px) {
+  .detail-update-button,
+  .detail-flags-stack,
+  .detail-saveflags-button {
+    transform: translateY(0.30rem) !important;
+  }
+
+  .detail-flags-stack {
+    justify-content: center !important;
+  }
+}
+/* ===== end lower document-type right controls slightly ===== */
+
+
+/* ===== OCR status text matches field-label size ===== */
+@media (max-width: 900px) {
+  .tab-panel[data-panel="ocr-review"] > p,
+  .tab-panel[data-panel="ocr-review"] #line-warning,
+  .tab-panel[data-panel="ocr-review"] #expected-lines,
+  .tab-panel[data-panel="ocr-review"] #actual-lines {
+    font-size: 0.85rem !important;
+    line-height: 1.35 !important;
+  }
+}
+/* ===== end OCR status text matches field-label size ===== */
+
+
+/* ===== OCR label + warning one line same size ===== */
+@media (max-width: 900px) {
+  .tab-panel[data-panel="ocr-review"] label[for="reviewed_text"] {
+    display: block !important;
+    white-space: nowrap !important;
+    font-size: 0.85rem !important;
+    line-height: 1.25 !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+  }
+
+  .tab-panel[data-panel="ocr-review"] label[for="reviewed_text"] #line-warning {
+    display: inline !important;
+    font-size: inherit !important;
+    line-height: inherit !important;
+    white-space: nowrap !important;
+    color: inherit !important;
+  }
+}
+/* ===== end OCR label + warning one line same size ===== */
+
+
+/* ===== OCR current-version line one-row ===== */
+@media (max-width: 900px) {
+  .tab-panel[data-panel="ocr-review"] > p:first-of-type {
+    font-size: 0.76rem !important;
+    line-height: 1.15 !important;
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+  }
+}
+/* ===== end OCR current-version line one-row ===== */
+
+
+/* ===== OCR meta block uniform small text ===== */
+@media (max-width: 900px) {
+  .tab-panel[data-panel="ocr-review"] > p:first-of-type,
+  .tab-panel[data-panel="ocr-review"] > p:nth-of-type(2),
+  .tab-panel[data-panel="ocr-review"] label[for="reviewed_text"] {
+    font-size: 0.76rem !important;
+    line-height: 1.15 !important;
+  }
+
+  .tab-panel[data-panel="ocr-review"] > p:nth-of-type(2),
+  .tab-panel[data-panel="ocr-review"] label[for="reviewed_text"] {
+    margin-top: 0.18rem !important;
+    margin-bottom: 0.18rem !important;
+  }
+
+  .tab-panel[data-panel="ocr-review"] > p:nth-of-type(2) {
+    white-space: normal !important;
+  }
+
+  .tab-panel[data-panel="ocr-review"] label[for="reviewed_text"] {
+    display: block !important;
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+  }
+
+  .tab-panel[data-panel="ocr-review"] #expected-lines,
+  .tab-panel[data-panel="ocr-review"] #actual-lines,
+  .tab-panel[data-panel="ocr-review"] #line-warning {
+    font-size: inherit !important;
+    line-height: inherit !important;
+  }
+}
+/* ===== end OCR meta block uniform small text ===== */
+
+
+/* ===== tighten OCR meta line spacing ===== */
+@media (max-width: 900px) {
+  .tab-panel[data-panel="ocr-review"] > p:first-of-type,
+  .tab-panel[data-panel="ocr-review"] > p:nth-of-type(2),
+  .tab-panel[data-panel="ocr-review"] label[for="reviewed_text"] {
+    margin-top: 0.06rem !important;
+    margin-bottom: 0.06rem !important;
+    line-height: 1.05 !important;
+  }
+
+  .tab-panel[data-panel="ocr-review"] > h2.card-title {
+    margin-bottom: 0.18rem !important;
+  }
+
+  .tab-panel[data-panel="ocr-review"] form[action$="/rerun-ocr"] {
+    margin: 0.28rem 0 !important;
+  }
+
+  .tab-panel[data-panel="ocr-review"] .form-field.full:first-of-type {
+    margin-top: 0.18rem !important;
+  }
+}
+/* ===== end tighten OCR meta line spacing ===== */
+
+
+/* ===== rerun OCR inline with Reviewed OCR title ===== */
+@media (max-width: 900px) {
+  .ocr-review-header-row {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    gap: 0.4rem !important;
+    margin-bottom: 0.18rem !important;
+  }
+
+  .ocr-review-header-row .card-title {
+    margin: 0 !important;
+  }
+
+  .ocr-rerun-inline-form {
+    margin: 0 !important;
+    flex: 0 0 auto !important;
+  }
+
+  .ocr-rerun-inline-form .button-row {
+    margin: 0 !important;
+  }
+
+  .ocr-rerun-inline-form button {
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    font-size: 0.72rem !important;
+    line-height: 1 !important;
+    font-weight: 500 !important;
+    height: 1.5rem !important;
+    min-height: 1.5rem !important;
+    padding: 0 0.34rem !important;
+    border-radius: 999px !important;
+    margin: 0 !important;
+  }
+}
+/* ===== end rerun OCR inline with Reviewed OCR title ===== */
+
+
+
+
+/* ===== Reviewed OCR title + rerun button clean one-row layout ===== */
+@media (max-width: 900px) {
+  .ocr-review-header-row {
+    display: grid !important;
+    grid-template-columns: minmax(0, 1fr) auto !important;
+    align-items: center !important;
+    column-gap: 0.35rem !important;
+    margin-bottom: 0.18rem !important;
+  }
+
+  .ocr-review-header-row .card-title {
+    margin: 0 !important;
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    word-break: normal !important;
+    overflow-wrap: normal !important;
+    min-width: 0 !important;
+    font-size: 0.98rem !important;
+    line-height: 1.05 !important;
+  }
+
+  .ocr-rerun-inline-form {
+    margin: 0 !important;
+    justify-self: end !important;
+  }
+
+  .ocr-rerun-inline-form button {
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    white-space: nowrap !important;
+    margin: 0 !important;
+  }
+}
+/* ===== end Reviewed OCR title + rerun button clean one-row layout ===== */
+
+
+
+
+/* ===== tighten OCR editor spacing v2 ===== */
+@media (max-width: 900px) {
+  .tab-panel[data-panel="ocr-review"] .form-field.full {
+    margin-top: 0 !important;
+    margin-bottom: 0.2rem !important;
+  }
+
+  .tab-panel[data-panel="ocr-review"] .form-field.full label[for="reviewed_text"] {
+    display: block !important;
+    margin: 0 0 0.02rem 0 !important;
+    padding: 0 !important;
+  }
+
+  .tab-panel[data-panel="ocr-review"] .editor-wrap {
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  .tab-panel[data-panel="ocr-review"] .line-numbers,
+  .tab-panel[data-panel="ocr-review"] #reviewed_text {
+    margin-top: 0 !important;
+  }
+}
+/* ===== end tighten OCR editor spacing v2 ===== */
+
+
+/* ===== reduce OCR line-number gutter ===== */
+@media (max-width: 900px) {
+  .tab-panel[data-panel="ocr-review"] .editor-wrap {
+    grid-template-columns: 2.1rem minmax(0, 1fr) !important;
+    column-gap: 0 !important;
+  }
+
+  .tab-panel[data-panel="ocr-review"] .line-numbers {
+    width: 2.1rem !important;
+    min-width: 2.1rem !important;
+    padding-left: 0.18rem !important;
+    padding-right: 0.22rem !important;
+    text-align: right !important;
+  }
+}
+/* ===== end reduce OCR line-number gutter ===== */
+
+
+/* ===== slightly reduce OCR editor text size ===== */
+@media (max-width: 900px) {
+  .tab-panel[data-panel="ocr-review"] #reviewed_text,
+  .tab-panel[data-panel="ocr-review"] .line-numbers {
+    font-size: 0.88rem !important;
+    line-height: 1.35 !important;
+  }
+}
+/* ===== end slightly reduce OCR editor text size ===== */
+
+
+
+
+/* ===== tighten metadata panel on mobile (real classes) ===== */
+@media (max-width: 900px) {
+  .meta-grid {
+    gap: 0.38rem !important;
+  }
+
+  .meta-item {
+    padding: 0.45rem 0.55rem !important;
+    border-radius: 0.9rem !important;
+  }
+
+  .meta-label {
+    font-size: 0.72rem !important;
+    line-height: 1.1 !important;
+    margin-bottom: 0.16rem !important;
+  }
+
+  .meta-item,
+  .meta-item div,
+  .meta-item span:not(.meta-label) {
+    font-size: 0.78rem !important;
+    line-height: 1.22 !important;
+  }
+
+  .meta-grid + .card-title,
+  .tab-panel[data-panel="source-options"] .card-title,
+  .tab-panel[data-panel="source-options"] h2.card-title {
+    margin-bottom: 0.35rem !important;
+  }
+
+  .tab-panel[data-panel="source-options"] .card[style*="padding:1rem"] {
+    padding: 0.7rem !important;
+  }
+
+  .tab-panel[data-panel="source-options"] form[style*="gap:1rem"] {
+    gap: 0.55rem !important;
+  }
+
+  .tab-panel[data-panel="source-options"] h3 {
+    font-size: 0.88rem !important;
+    line-height: 1.1 !important;
+    margin-bottom: 0.35rem !important;
+  }
+
+  .tab-panel[data-panel="source-options"] label[style*="display:flex"] {
+    font-size: 0.76rem !important;
+    line-height: 1.15 !important;
+  }
+}
+/* ===== end tighten metadata panel on mobile (real classes) ===== */

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=110">
+    <link rel="stylesheet" href="/static/app.css?v=131">
     <link rel="stylesheet" href="/static/app-shell.css?v=66">
 </head>
 <body>

app/templates/documents/detail.html

@@ -169,13 +169,12 @@
                     </div>
 
                     <div class="tab-panel{% if active_tab == 'ocr-review' %} active{% endif %}" data-panel="ocr-review">
+                        <div class="ocr-review-header-row">
                             <h2 class="card-title">Reviewed OCR</h2>
-
+                            <form method="post" action="/documents/{{ document.document_id }}/rerun-ocr" class="ocr-rerun-inline-form">
-<form method="post" action="/documents/{{ document.document_id }}/rerun-ocr" style="margin: 0.75rem 0;">
-    <div class="button-row">
                                 <button type="submit">Rerun OCR</button>
+                            </form>
                         </div>
-</form>
                         {% if current_text_version %}
                             <p>Current OCR version: v{{ current_text_version.version_number }} — {{ current_text_version.version_type }} — {{ current_text_version.created_at }}</p>
                         {% else %}
@@ -183,16 +182,16 @@
                         {% endif %}
 
                         <p>
-                            Expected OCR lines: <span id="expected-lines">{{ expected_line_count }}</span><br>
+                            Expected OCR lines: <span id="expected-lines">{{ expected_line_count }}</span>
-                            Current editor lines: <span id="actual-lines">{{ actual_line_count }}</span><br>
+                            &nbsp; | &nbsp;
-                            <span id="line-warning" class="line-warning" {% if expected_line_count == actual_line_count %}style="display:none;"{% endif %}>
+                            Current editor lines: <span id="actual-lines">{{ actual_line_count }}</span>
-                                Line count mismatch may affect corrected PDF layout.
-                            </span>
                         </p>
 
                         <form method="post" action="/documents/{{ document.document_id }}/review-text">
                             <div class="form-field full">
-                                <label for="reviewed_text">Edit reviewed OCR text (one line per OCR line)</label>
+                                <label for="reviewed_text">
+                                    Review OCR text (1 line each; mismatch affects PDF)
+                                </label>
                                 <div class="editor-wrap">
                                     <pre class="line-numbers" id="line-numbers">{% for n in line_numbers %}{{ n }}
 {% endfor %}</pre>