chris/nsfwapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bugfix

Browse Source
This commit is contained in:
Linrador 2026-05-15 11:24:18 +02:00
parent fd3442500c
commit 2ee9599fd3
1 changed files with 30 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/components/ui/TrainingTab.tsx
View File

@ -4746,19 +4746,24 @@ export default function TrainingTab(props: {
bottomReservePx: 138,
}
const imageStageStyle = {
aspectRatio: `${frameLayoutSize.width} / ${frameLayoutSize.height}`,
const imageStageStyle = imageExpanded
? ({
'--image-stage-max-h': `${imageStageLimits.baseDvh}dvh`,
'--image-stage-max-h-sm': `${imageStageLimits.smDvh}dvh`,
} as CSSProperties & Record<string, string | number>)
: ({
aspectRatio: `${frameLayoutSize.width} / ${frameLayoutSize.height}`,
'--image-stage-max-h': `${imageStageLimits.baseDvh}dvh`,
'--image-stage-max-h-sm': `${imageStageLimits.smDvh}dvh`,
'--image-stage-max-h-lg': `min(calc(100dvh - ${imageStageLimits.bottomReservePx}px - env(safe-area-inset-bottom)), ${imageStageLimits.lgDvh}dvh, ${imageStageLimits.lgPx}px)`,
'--image-stage-max-h': `${imageStageLimits.baseDvh}dvh`,
'--image-stage-max-h-sm': `${imageStageLimits.smDvh}dvh`,
'--image-stage-max-h-lg': `min(${imageStageLimits.lgDvh}dvh, ${imageStageLimits.lgPx}px)`,
'--image-stage-w': `${imageStageLimits.baseDvh * imageAspectRatio}dvh`,
'--image-stage-w-sm': `${imageStageLimits.smDvh * imageAspectRatio}dvh`,
'--image-stage-w-lg': `min(${imageStageLimits.lgDvh * imageAspectRatio}dvh, ${Math.round(
imageStageLimits.lgPx * imageAspectRatio
)}px)`,
} as CSSProperties & Record<string, string | number>
'--image-stage-w': `${imageStageLimits.baseDvh * imageAspectRatio}dvh`,
'--image-stage-w-sm': `${imageStageLimits.smDvh * imageAspectRatio}dvh`,
'--image-stage-w-lg': `min(${imageStageLimits.lgDvh * imageAspectRatio}dvh, ${Math.round(
imageStageLimits.lgPx * imageAspectRatio
)}px)`,
} as CSSProperties & Record<string, string | number>)
const imageStageHeightClass = [
'max-h-[var(--image-stage-max-h)]',
@ -4872,7 +4877,7 @@ export default function TrainingTab(props: {
<div
className={[
'grid grid-cols-1 items-start gap-2 lg:h-full lg:min-h-0 lg:overflow-visible',
'grid grid-cols-1 items-start gap-2 lg:h-full lg:min-h-0 lg:items-stretch lg:overflow-hidden',
imageExpanded
? [
// Desktop: Sidebars bleiben sichtbar, Mitte bekommt deutlich mehr Breite.
@ -4945,17 +4950,21 @@ export default function TrainingTab(props: {
</aside>
{/* Mitte */}
<div className="min-w-0 lg:h-full lg:min-h-0 lg:overflow-visible">
<div className="min-w-0 lg:flex lg:h-full lg:min-h-0 lg:flex-col lg:overflow-hidden">
<section
className={[
'min-w-0 rounded-xl border border-gray-200 bg-white p-2 shadow-sm dark:border-white/10 dark:bg-gray-900/60 sm:p-3',
'lg:self-start',
imageExpanded
? 'lg:flex lg:h-full lg:min-h-0 lg:flex-col lg:overflow-hidden'
: 'lg:self-start',
].join(' ')}
>
<div
className={[
'relative z-50 mx-auto flex items-center justify-center rounded-lg bg-black p-2 sm:p-3',
imageStageHeightClass,
imageExpanded
? 'w-full min-h-0 max-h-[var(--image-stage-max-h)] sm:max-h-[var(--image-stage-max-h-sm)] lg:h-auto lg:max-h-none lg:flex-1 lg:self-stretch'
: imageStageHeightClass,
'overflow-visible',
].join(' ')}
style={imageStageStyle}
@ -4965,7 +4974,9 @@ export default function TrainingTab(props: {
<div
ref={imageBoxRef}
className={[
'relative z-50 inline-flex min-h-0 max-h-full max-w-full select-none overscroll-contain transition',
imageExpanded
? 'relative z-50 flex h-full w-full min-h-0 select-none items-center justify-center overscroll-contain transition'
: 'relative z-50 inline-flex min-h-0 max-h-full max-w-full select-none overscroll-contain transition',
imageTouchClass,
'[-webkit-touch-callout:none] [-webkit-user-select:none] [user-select:none]',
trainingRunning || loading ? 'pointer-events-none' : '',
@ -5001,7 +5012,9 @@ export default function TrainingTab(props: {
onContextMenu={(e) => e.preventDefault()}
onDragStart={(e) => e.preventDefault()}
className={[
'block h-auto min-h-0 max-h-full max-w-full rounded-md object-contain',
imageExpanded
? 'block h-full w-full min-h-0 rounded-md object-contain'
: 'block h-auto min-h-0 max-h-full max-w-full rounded-md object-contain',
'select-none',
'transition-opacity duration-500 ease-out will-change-opacity motion-reduce:transition-none',
frameImageLoaded ? 'opacity-100' : 'opacity-0',