3dtours/RecipesCam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(mobile): lock chip bar height to 52px and restore full stage height on phone

Browse Source
This commit is contained in:
3dtours
2026-10-17 11:31:38 +07:00
parent bbc64118a5
commit 388af7a413
2 changed files with 96 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/frontend/src/styles/app.css
+95 -35
View File
@@ -2469,7 +2469,7 @@ form[data-key='immich-modal'] {
.chips { display: contents; }
.workspace:not(.strip-open) .chips { display: none; }
.workspace.strip-open .rail { display: none; }
.stage-slot { order: 0; min-height: 0; }
.stage-slot { order: 0 !important; flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; }
.col[data-col="slider"] { order: 1; }
.col-sub { order: 2; }
.col-main { order: 3; }
@@ -2531,55 +2531,71 @@ form[data-key='immich-modal'] {
gap: 6px;
overflow: visible;
border-right: none;
height: auto !important;
flex: 0 0 auto !important;
}
/* One chip per line is the desktop column's shape; a phone wants the row. */
.col .chip-row { flex-direction: row; align-items: center; }
.col .chip { text-align: center; }
.col .chip-row {
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
width: max-content !important;
min-width: 100% !important;
}
.col .chip {
width: auto !important;
flex: 0 0 auto !important;
white-space: nowrap !important;
text-align: center;
}
.col-slider, .col-create { width: 100% !important; }
/* --- the tab's own chips: the bottom bar -------------------------------- */
/* A strip reads across, never down: what does not fit scrolls sideways, so
the bar keeps exactly one chip's height whatever the tab holds. */
.col-main {
flex-direction: row;
align-items: center;
gap: 6px;
max-height: 46vh;
overflow-x: auto;
overflow-y: hidden;
background: var(--bg);
border-top: 1px solid var(--border-soft);
/* No inset here any more: the path under the strip (.crumb) is the last
line of the phone's stack now, so it carries the home indicator. */
padding: 6px 8px;
flex-direction: row !important;
align-items: center !important;
gap: 6px !important;
height: 52px !important;
max-height: 52px !important;
flex: 0 0 52px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
background: var(--bg) !important;
border-top: 1px solid var(--border-soft) !important;
padding: 6px 8px !important;
}
/* The strip is as wide as its chips and the bar scrolls: a row that was
allowed to shrink would squeeze under its own contents and the chips would
paint over the ones beside them. */
.col-main > *, .col-sub:not(.wm-extra) > * { flex: 0 0 auto; }
.col-main > *, .col-sub:not(.wm-extra) > * { flex: 0 0 auto !important; }
.col-main:not(.col-create) .chip-row,
.col-sub:not(.wm-extra) .chip-row {
flex-wrap: nowrap !important;
min-width: 100% !important;
width: max-content !important;
}
.col-main .chip { flex: 0 0 auto; }
.col-main .chip { flex: 0 0 auto !important; width: auto !important; }
/* The rule a strip is read across runs the other way here: in a row of chips
it divides the line, it does not break it. */
.col-main .chip-rule { flex: 0 0 auto; width: 1px; height: 18px; margin: 0 3px; }
.col-main .chip-rule { flex: 0 0 auto !important; width: 1px !important; height: 18px !important; margin: 0 3px !important; }
/* RESET is ruled off the tab's chips at the foot of a desktop column; in the
bar the rule moves to their side. The topbar's RESET already covers every
other tab (it and this row call the same reset), so the row only survives
where the button does something the topbar's does not: CREATE's form. */
.reset-row { display: none; }
.col-create .reset-row { display: block; margin: 0; padding: 0 0 0 8px; border-top: none; border-left: 1px solid var(--border); }
.reset-row { display: none !important; }
.col-create .reset-row { display: block !important; margin: 0; padding: 0 0 0 8px; border-top: none; border-left: 1px solid var(--border); }
/* CREATE's form is not a strip of chips: it keeps the column's shape and
scrolls down instead of across, in the bar's place. */
.col-main.col-create {
flex-direction: column;
align-items: stretch;
overflow-x: hidden;
overflow-y: auto;
flex-direction: column !important;
align-items: stretch !important;
overflow-x: hidden !important;
overflow-y: auto !important;
height: auto !important;
max-height: 46vh !important;
flex: 0 1 auto !important;
}
/* LIGHT is a strip of chips like any other tab, and its chips are its four
panels — so the widths of the panels' heads come off and the row stands in
@@ -2643,19 +2659,35 @@ form[data-key='immich-modal'] {
strip its chip opened, and they keep the bar in sight under them. The
displacing three wear the bar's slot and the bar's own skin, not the
sub-column's — this row IS the bar now. */
.col-sub[data-col="options"], .col-sub[data-col="wm"], .col-sub[data-col="recipes"] {
order: 3;
background: var(--bg);
max-height: 46vh;
.col-sub[data-col="options"],
.col-sub[data-col="recipes"],
.col-sub[data-col="history"] {
order: 3 !important;
background: var(--bg) !important;
height: 52px !important;
max-height: 52px !important;
flex: 0 0 52px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
border-top: 1px solid var(--border-soft) !important;
padding: 6px 8px !important;
}
/* Panels with sliders or vertical controls keep the taller ceiling. */
.col-sub[data-col="wm"],
.col-sub[data-col="custom-frame"] {
order: 3 !important;
border-top: 1px solid var(--border-soft) !important;
overflow-y: auto !important;
height: auto !important;
max-height: 46vh !important;
flex: 0 1 auto !important;
}
/* A watermark's column is not a row of chips: it keeps the column's shape in
the slot, with the bar's rule over it and the same ceiling. */
.col-sub[data-col="wm"] { border-top: 1px solid var(--border-soft); overflow-y: auto; }
.workspace:has(.chips > .col-sub[data-col="options"]) .col-main,
.workspace:has(.chips > .col-sub[data-col="wm"]) .col-main,
.workspace:has(.chips > .col-sub[data-col="recipes"]) .col-main,
.workspace:has(.chips > .col-sub[data-col="history"]) .col-main,
.workspace:has(.chips > .col-sub[data-col="mask"]) .col-main { display: none; }
.workspace:has(.chips > .col-sub[data-col="custom-frame"]) .col-main,
.workspace:has(.chips > .col-sub[data-col="mask"]) .col-main { display: none !important; }
/* One strip at a time holds here too: the ruler a knob opens is the last
strip of the walk, so it takes the place of the strip that opened it. The
@@ -3007,9 +3039,14 @@ form[data-key='immich-modal'] {
}
.workspace.is-mobile .stage-slot {
order: 0 !important;
flex: 1 1 auto !important;
min-height: 0 !important;
height: auto !important;
}
.workspace.is-mobile .stage {
flex: 1 1 auto !important;
min-height: 0 !important;
height: 100% !important;
padding: 6px 8px !important;
gap: 8px !important;
}
@@ -3105,8 +3142,9 @@ form[data-key='immich-modal'] {
.workspace.is-mobile .col-main {
flex-direction: row !important;
align-items: center !important;
gap: 6px !important;
max-height: 46vh !important;
height: 52px !important;
max-height: 52px !important;
flex: 0 0 52px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
background: var(--bg) !important;
@@ -3117,6 +3155,12 @@ form[data-key='immich-modal'] {
.workspace.is-mobile .col-sub:not(.wm-extra) > * {
flex: 0 0 auto !important;
}
/* CREATE's form is not a strip: it scrolls, so it keeps the taller ceiling. */
.workspace.is-mobile .col-main.col-create {
max-height: 46vh !important;
height: auto !important;
flex: 0 1 auto !important;
}
.workspace.is-mobile .col-main:not(.col-create) .chip-row,
.workspace.is-mobile .col-sub:not(.wm-extra) .chip-row {
min-width: 100% !important;
@@ -3168,11 +3212,27 @@ form[data-key='immich-modal'] {
white-space: nowrap !important;
}
.workspace.is-mobile .col-sub[data-col="options"],
.workspace.is-mobile .col-sub[data-col="wm"],
.workspace.is-mobile .col-sub[data-col="recipes"] {
.workspace.is-mobile .col-sub[data-col="recipes"],
.workspace.is-mobile .col-sub[data-col="history"] {
order: 3 !important;
background: var(--bg) !important;
height: 52px !important;
max-height: 52px !important;
flex: 0 0 52px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
border-top: 1px solid var(--border-soft) !important;
padding: 6px 8px !important;
}
/* The watermark's column is a panel, not a strip: it keeps the taller ceiling. */
.workspace.is-mobile .col-sub[data-col="wm"],
.workspace.is-mobile .col-sub[data-col="custom-frame"] {
order: 3 !important;
border-top: 1px solid var(--border-soft) !important;
overflow-y: auto !important;
height: auto !important;
max-height: 46vh !important;
flex: 0 1 auto !important;
}
.workspace.is-mobile:has(.chips > .col-sub[data-col="options"]) .col-main,
.workspace.is-mobile:has(.chips > .col-sub[data-col="wm"]) .col-main,