diff --git a/docker/frontend/src/styles/app.css b/docker/frontend/src/styles/app.css index 0f0475d..f104e09 100644 --- a/docker/frontend/src/styles/app.css +++ b/docker/frontend/src/styles/app.css @@ -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, diff --git a/docker/recipescam-images.tar.gz.sha256 b/docker/recipescam-images.tar.gz.sha256 index cbddcce..ac8de3e 100644 --- a/docker/recipescam-images.tar.gz.sha256 +++ b/docker/recipescam-images.tar.gz.sha256 @@ -1 +1 @@ -7cd97bf92bc1bf2446e53c10ff3e486b94e9ce0f841ebf9ba6a6fbaf81ef79ae recipescam-images.tar.gz +f258217d804e6ee5c0720730b284e1c8045a6692758aeb0570723239e2974617 recipescam-images.tar.gz