From 14e83c5cf3eb64650a019b49d644b68dbd2dc585 Mon Sep 17 00:00:00 2001
From: KennyG <kennyg@kennyg.com>
Date: Wed, 1 Apr 2026 14:57:15 -0400
Subject: [PATCH] Polish hasharr integration layout for readability.

Reflow the hasharr settings into a two-row arrangement with aligned controls, grouped actions/status messaging, and a cleaner profile result block to improve scanability.

Made-with: Cursor
---
 ui/src/app/app.html | 48 ++++++++++++++++++++++++---------------------
 ui/src/app/app.sass | 23 ++++++++++++++++++++++
 2 files changed, 49 insertions(+), 22 deletions(-)

diff --git a/ui/src/app/app.html b/ui/src/app/app.html
index 87c110e..f653ccd 100644
--- a/ui/src/app/app.html
+++ b/ui/src/app/app.html
@@ -428,19 +428,19 @@
               <div class="row">
                 <div class="col-12">
                   <hr class="my-3">
-                  <div class="row g-3 mb-3">
+                  <div class="row g-3 mb-3 hasharr-integration">
                     <div class="col-12">
                       <div class="action-group-label">Hasharr Integration</div>
                     </div>
-                    <div class="col-md-3">
-                      <div class="form-check form-switch mt-2">
+                    <div class="col-12 col-md-3 d-flex align-items-center">
+                      <div class="form-check form-switch mb-0">
                         <input class="form-check-input" type="checkbox" role="switch" id="hasharrEnabled"
                           name="hasharrEnabled" [(ngModel)]="hasharrEnabled"
                           [disabled]="addInProgress || downloads.loading">
                         <label class="form-check-label" for="hasharrEnabled">Enabled</label>
                       </div>
                     </div>
-                    <div class="col-md-5">
+                    <div class="col-12 col-md-5">
                       <div class="input-group">
                         <span class="input-group-text">Hasharr URL</span>
                         <input type="text"
@@ -451,7 +451,7 @@
                           [disabled]="addInProgress || downloads.loading">
                       </div>
                     </div>
-                    <div class="col-md-2">
+                    <div class="col-6 col-md-2">
                       <div class="input-group">
                         <span class="input-group-text">Service ID</span>
                         <input type="number"
@@ -462,7 +462,7 @@
                           [disabled]="addInProgress || downloads.loading">
                       </div>
                     </div>
-                    <div class="col-md-2">
+                    <div class="col-6 col-md-2">
                       <div class="input-group">
                         <span class="input-group-text">Timeout</span>
                         <input type="number"
@@ -473,25 +473,29 @@
                           [disabled]="addInProgress || downloads.loading">
                       </div>
                     </div>
-                    <div class="col-12">
-                      <button type="button" class="btn btn-secondary" (click)="saveHasharrSettings()">
-                        Save Hasharr Settings
-                      </button>
-                      <button type="button" class="btn btn-outline-secondary ms-2" (click)="testHasharrService()">
-                        Test Service
-                      </button>
-                      @if (hasharrSettingsStatus) {
-                        <span class="ms-3 text-muted">{{ hasharrSettingsStatus }}</span>
-                      }
-                    </div>
-                    @if (hasharrTestStatus) {
-                      <div class="col-12">
-                        <small class="text-muted">{{ hasharrTestStatus }}</small>
+                    <div class="col-12 col-md-7">
+                      <div class="hasharr-action-row">
+                        <button type="button" class="btn btn-secondary" (click)="saveHasharrSettings()">
+                          Save Hasharr Settings
+                        </button>
+                        <button type="button" class="btn btn-outline-secondary" (click)="testHasharrService()">
+                          Test Service
+                        </button>
                       </div>
-                    }
+                    </div>
+                    <div class="col-12 col-md-5">
+                      <div class="hasharr-status-block">
+                        @if (hasharrSettingsStatus) {
+                          <small class="text-muted d-block">{{ hasharrSettingsStatus }}</small>
+                        }
+                        @if (hasharrTestStatus) {
+                          <small class="text-muted d-block">{{ hasharrTestStatus }}</small>
+                        }
+                      </div>
+                    </div>
                     @if (hasharrTestProfile) {
                       <div class="col-12">
-                        <div class="small text-muted">
+                        <div class="small text-muted hasharr-profile-result">
                           <div><strong>Profile Name:</strong> {{ hasharrTestProfile['name'] }}</div>
                           <div><strong>Enabled:</strong> {{ hasharrTestProfile['enabled'] }}</div>
                           <div><strong>Apply Actions:</strong> {{ hasharrTestProfile['applyActions'] }}</div>
diff --git a/ui/src/app/app.sass b/ui/src/app/app.sass
index 9368c48..dd729c3 100644
--- a/ui/src/app/app.sass
+++ b/ui/src/app/app.sass
@@ -196,3 +196,26 @@ main
 
   &.active
     color: var(--bs-success-text-emphasis)
+
+.hasharr-integration
+  .input-group
+    margin-bottom: 0
+
+.hasharr-action-row
+  display: flex
+  flex-wrap: wrap
+  gap: 0.5rem
+
+.hasharr-status-block
+  min-height: 2.5rem
+  display: flex
+  flex-direction: column
+  justify-content: center
+  text-align: left
+
+.hasharr-profile-result
+  margin-top: 0.25rem
+  padding: 0.5rem 0.75rem
+  border: 1px solid var(--bs-border-color)
+  border-radius: 0.375rem
+  background: var(--bs-tertiary-bg)