diff --git a/frontend/src/components/ui/TrainingTab.tsx b/frontend/src/components/ui/TrainingTab.tsx
index 22909b6..3656a26 100644
--- a/frontend/src/components/ui/TrainingTab.tsx
+++ b/frontend/src/components/ui/TrainingTab.tsx
@@ -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',