From 027235b7ddd40fce2e204af61b021db440ae1bd7 Mon Sep 17 00:00:00 2001
From: KennyG <kennyg@kennyg.com>
Date: Thu, 2 Apr 2026 09:19:51 -0400
Subject: [PATCH] Fix webhook row sizing with separate control widths.

Split enabled, endpoint, and timeout into independent width buckets (150/auto/200) and prevent timeout group wrapping so the numeric input stays compact without breaking row layout.

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

diff --git a/ui/src/app/app.html b/ui/src/app/app.html
index 3a666f0..f62bfcb 100644
--- a/ui/src/app/app.html
+++ b/ui/src/app/app.html
@@ -400,28 +400,32 @@
                     <div class="col-12">
                       <div class="action-group-label">Webhook Integration</div>
                     </div>
-                    <div class="col-12 col-md-2 d-flex align-items-center">
-                      <div class="form-check form-switch mb-0">
-                        <input class="form-check-input" type="checkbox" role="switch" id="webhookEnabled"
-                          name="webhookEnabled" [(ngModel)]="webhookEnabled"
-                          [disabled]="addInProgress || subscribeInProgress || downloads.loading">
-                        <label class="form-check-label" for="webhookEnabled">Enabled</label>
-                      </div>
-                    </div>
-                    <div class="col-12 col-md-8">
-                      <div class="input-group">
-                        <span class="input-group-text">Endpoint</span>
-                        <input type="text" class="form-control" placeholder="http://localhost:9995/api/hash-service/1"
-                          name="webhookEndpoint" [(ngModel)]="webhookEndpoint"
-                          [disabled]="addInProgress || subscribeInProgress || downloads.loading">
-                      </div>
-                    </div>
-                    <div class="col-6 col-md-2">
-                      <div class="input-group">
-                        <span class="input-group-text">Timeout</span>
-                        <input type="number" min="1" class="form-control webhook-timeout-input" name="webhookTimeoutSec"
-                          [(ngModel)]="webhookTimeoutSec"
-                          [disabled]="addInProgress || subscribeInProgress || downloads.loading">
+                    <div class="col-12">
+                      <div class="webhook-control-row">
+                        <div class="webhook-control-enabled d-flex align-items-center">
+                          <div class="form-check form-switch mb-0">
+                            <input class="form-check-input" type="checkbox" role="switch" id="webhookEnabled"
+                              name="webhookEnabled" [(ngModel)]="webhookEnabled"
+                              [disabled]="addInProgress || subscribeInProgress || downloads.loading">
+                            <label class="form-check-label" for="webhookEnabled">Enabled</label>
+                          </div>
+                        </div>
+                        <div class="webhook-control-endpoint">
+                          <div class="input-group">
+                            <span class="input-group-text">Endpoint</span>
+                            <input type="text" class="form-control" placeholder="http://localhost:9995/api/hash-service/1"
+                              name="webhookEndpoint" [(ngModel)]="webhookEndpoint"
+                              [disabled]="addInProgress || subscribeInProgress || downloads.loading">
+                          </div>
+                        </div>
+                        <div class="webhook-control-timeout">
+                          <div class="input-group webhook-timeout-group">
+                            <span class="input-group-text">Timeout</span>
+                            <input type="number" min="1" class="form-control webhook-timeout-input" name="webhookTimeoutSec"
+                              [(ngModel)]="webhookTimeoutSec"
+                              [disabled]="addInProgress || subscribeInProgress || downloads.loading">
+                          </div>
+                        </div>
                       </div>
                     </div>
                     <div class="col-12 col-md-7">
diff --git a/ui/src/app/app.sass b/ui/src/app/app.sass
index fec75e2..ad8ebe2 100644
--- a/ui/src/app/app.sass
+++ b/ui/src/app/app.sass
@@ -201,8 +201,27 @@ main
   .input-group
     margin-bottom: 0
 
+  .webhook-control-row
+    display: grid
+    row-gap: 0.75rem
+
+  .webhook-control-endpoint
+    min-width: 0
+
+  .webhook-timeout-group
+    flex-wrap: nowrap
+
   .webhook-timeout-input
-    min-width: 66px
+    width: 3.4em
+    min-width: 3.4em
+    max-width: 3.4em
+    flex: 0 0 3.4em
+
+@media (min-width: 768px)
+  .webhook-integration
+    .webhook-control-row
+      grid-template-columns: 150px minmax(0, 1fr) 200px
+      column-gap: 0.75rem
 
 .webhook-action-row
   display: flex