way/pigway-frame-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 29 Wiki Activity

fix: compact connection and collage controls across responsive pages

Browse Source
This commit is contained in:
渡口浪人
2026-10-18 14:05:02 +08:00
parent 7cb940cf36
commit c153822479
2 changed files with 25 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pigway_frame_flow/web/style.css
+20
View File
@@ -198,3 +198,23 @@ form#weather-form{display:grid;grid-template-columns:minmax(160px,1fr) minmax(22
#weather-form input,#weather-form select{height:46px}
#image-host-form>button{align-self:flex-start}
/* Keep short connection fields together while leaving long content room to grow. */
form:is(#ai-settings-form,#image-ai-config,#client-form,#hook-form,#provider-form,#mqtt-config){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
form:is(#ai-settings-form,#image-ai-config,#client-form,#hook-form,#provider-form,#mqtt-config)>.field{min-width:0}
form:is(#ai-settings-form,#image-ai-config,#client-form,#hook-form,#provider-form,#mqtt-config)>:is(button,p,.check-row,.form-grid){grid-column:1/-1;justify-self:start}
form:is(#ai-settings-form,#image-ai-config,#client-form,#hook-form,#provider-form,#mqtt-config)>button,#image-ai-generate>button{align-self:flex-start;justify-self:start}
#storage-policy>.form-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:840px}
form#auto-collage-form{display:grid;grid-template-columns:minmax(200px,1fr) 140px minmax(200px,1fr);align-items:start}
#auto-collage-form>.form-grid{display:contents}
#auto-collage-form>.field:has(textarea),#auto-collage-form>:is(.check-row,.hint,.actions){grid-column:1/-1}
#auto-collage-form .field{min-width:0}
#auto-collage-form input:not([type=checkbox]),#auto-collage-form select{height:46px}
#auto-collage-form textarea{min-height:110px}
form#client-form{grid-template-columns:repeat(4,minmax(0,1fr))}
#client-form>.field{grid-column:span 2}
form#client-form>.check-row{grid-column:auto}
form#mqtt-config{grid-template-columns:minmax(160px,1fr) 110px minmax(180px,1.5fr) minmax(140px,1fr)}
@media(max-width:1050px){form:is(#ai-settings-form,#image-ai-config,#client-form,#hook-form,#provider-form,#mqtt-config){grid-template-columns:repeat(2,minmax(0,1fr))}form#auto-collage-form{grid-template-columns:minmax(0,1fr) 140px}#auto-collage-form>.field{grid-column:1/-1}}
@media(max-width:720px){form:is(#ai-settings-form,#image-ai-config,#client-form,#hook-form,#provider-form,#mqtt-config),form#auto-collage-form,#storage-policy>.form-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:720px){#client-form>.field{grid-column:auto}}