danvics/metube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Fix webhook row sizing with separate control widths.

Browse source 
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
This commit is contained in:
KennyG 2026-04-02 09:19:51 -04:00
parent b79ffdbbcf
commit 027235b7dd
2 changed files with 46 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
ui/src/app/app.html
View file

@ -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">

21
ui/src/app/app.sass
View file

@ -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