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="col-12">
<div class="action-group-label">Webhook Integration</div> <div class="action-group-label">Webhook Integration</div>
</div> </div>
<div class="col-12 col-md-2 d-flex align-items-center"> <div class="col-12">
<div class="form-check form-switch mb-0"> <div class="webhook-control-row">
<input class="form-check-input" type="checkbox" role="switch" id="webhookEnabled" <div class="webhook-control-enabled d-flex align-items-center">
name="webhookEnabled" [(ngModel)]="webhookEnabled" <div class="form-check form-switch mb-0">
[disabled]="addInProgress || subscribeInProgress || downloads.loading"> <input class="form-check-input" type="checkbox" role="switch" id="webhookEnabled"
<label class="form-check-label" for="webhookEnabled">Enabled</label> name="webhookEnabled" [(ngModel)]="webhookEnabled"
</div> [disabled]="addInProgress || subscribeInProgress || downloads.loading">
</div> <label class="form-check-label" for="webhookEnabled">Enabled</label>
<div class="col-12 col-md-8"> </div>
<div class="input-group"> </div>
<span class="input-group-text">Endpoint</span> <div class="webhook-control-endpoint">
<input type="text" class="form-control" placeholder="http://localhost:9995/api/hash-service/1" <div class="input-group">
name="webhookEndpoint" [(ngModel)]="webhookEndpoint" <span class="input-group-text">Endpoint</span>
[disabled]="addInProgress || subscribeInProgress || downloads.loading"> <input type="text" class="form-control" placeholder="http://localhost:9995/api/hash-service/1"
</div> name="webhookEndpoint" [(ngModel)]="webhookEndpoint"
</div> [disabled]="addInProgress || subscribeInProgress || downloads.loading">
<div class="col-6 col-md-2"> </div>
<div class="input-group"> </div>
<span class="input-group-text">Timeout</span> <div class="webhook-control-timeout">
<input type="number" min="1" class="form-control webhook-timeout-input" name="webhookTimeoutSec" <div class="input-group webhook-timeout-group">
[(ngModel)]="webhookTimeoutSec" <span class="input-group-text">Timeout</span>
[disabled]="addInProgress || subscribeInProgress || downloads.loading"> <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> </div>
<div class="col-12 col-md-7"> <div class="col-12 col-md-7">

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

@ -201,8 +201,27 @@ main
.input-group .input-group
margin-bottom: 0 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 .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 .webhook-action-row
display: flex display: flex