From fa6d19f7679c3c71d711d382af4b6743fdaa7bab Mon Sep 17 00:00:00 2001
From: Pontoporeia <pontoporeia@happyngreen.fr>
Date: Sun, 5 Jul 2026 17:22:58 +0200
Subject: [PATCH] tfe: rework desktop layout to 35/65 flex columns, independent
 scrolling, no horizontal overflow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Switched from grid to flex for two-column layout
Left column (flex: 0 0 35%): author, title, meta, synopsis — scrolls independently
Right column (flex: 1): files/media — scrolls independently
Added .tfe-file-iframe class to PDF/website iframes, scoped width/height constraints
All media gets width:100% + max-width:100% to prevent overflow
Mobile (<900px): reverts to single-column page-level scrolling
---
 TODO.md                       |  1 +
 app/public/assets/css/tfe.css | 68 ++++++++++++++++++++++++++---------
 app/templates/public/tfe.php  | 26 +++++++-------
 3 files changed, 67 insertions(+), 28 deletions(-)

diff --git a/TODO.md b/TODO.md
index daa00c1..a2d814e 100644
--- a/TODO.md
+++ b/TODO.md
@@ -27,3 +27,4 @@
 - [x] Fix file size limits: align all layers (JS/FilepondHandler/ThesisFileHandler/validate-fragment) — video/audio 5 GB, default 500 MB, PDF 100 MB; fix JS fileValidateSizeFilter gate bug that rejected AV files >1 GB despite 8 GB per-ext cap
 - [x] Fix: deleting contact groups in apropos form not persisted (no change event after DOM removal, autosave never triggered)
 - [x] Improve h1, h2, h3 size difference in base.css heading scale
+- [x] Rework TFE page desktop layout: two columns 35%/65%, left = author/title/meta/synopsis, right = files, media 100% width; columns scroll independently, content fits 100vw
diff --git a/app/public/assets/css/tfe.css b/app/public/assets/css/tfe.css
index 89da04a..ed5e740 100644
--- a/app/public/assets/css/tfe.css
+++ b/app/public/assets/css/tfe.css
@@ -6,42 +6,62 @@
 .tfe-main {
 	flex: 1;
 	min-height: 0;
-	overflow-y: auto;
-	padding: var(--space-l) var(--space-m) var(--space-xl);
+	overflow: hidden;
+	padding: var(--space-l) var(--space-m) 0;
 }
 
-/* Stacked article layout */
+/* Stacked article layout — fills main height */
 .tfe-layout {
 	display: flex;
 	flex-direction: column;
 	gap: var(--space-xl);
 	width: 100%;
+	height: 100%;
+	min-height: 0;
 }
 
-/* Row 1: Author above Title */
+/* Row 1: Author above Title (kept for backward compat, no longer used) */
 .tfe-header-row {
 	display: flex;
 	flex-direction: column;
 	gap: var(--space-3xs);
 }
 
-/* Row 2: Two columns — meta left, synopsis right */
+/* Two-column layout: left 35vw (info), right fills remaining (files) */
 .tfe-content-row {
 	display: grid;
-	grid-template-columns: 1fr 1fr;
+	grid-template-columns: 35vw 1fr;
 	gap: var(--space-xl);
-	align-items: start;
+	flex: 1;
+	min-height: 0;
 }
 
-/* Row 3: Files flex container */
+/* Left column: stacks author, title, meta, synopsis — scrolls independently */
+.tfe-left-column {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-m);
+	overflow-y: auto;
+	min-width: 0;
+}
+
+/* Right column: holds files — scrolls independently */
+.tfe-right-column {
+	display: flex;
+	flex-direction: column;
+	overflow-y: auto;
+	min-width: 0;
+}
+
+/* Files container inside right column */
 .tfe-files {
 	display: flex;
-	flex-wrap: wrap;
+	flex-direction: column;
 	gap: var(--space-m);
 }
 
 .tfe-file-item {
-	flex: 1 1 300px;
+	width: 100%;
 	min-width: 0;
 	overflow: hidden;
 	border-radius: var(--radius);
@@ -59,6 +79,7 @@
 .tfe-file-item embed,
 .tfe-file-item video {
 	width: 100%;
+	max-width: 100%;
 	display: block;
 	border: none;
 }
@@ -67,8 +88,13 @@
 	max-height: 500px;
 }
 
-.tfe-file-item embed {
+.tfe-file-item embed,
+.tfe-file-iframe {
+	width: 100%;
+	max-width: 100%;
 	height: clamp(300px, 80vh, 700px);
+	display: block;
+	border: none;
 }
 
 .tfe-file-item figcaption {
@@ -270,13 +296,23 @@
 
 /* Responsive */
 @media (max-width: 900px) {
-	.tfe-content-row {
-		grid-template-columns: 1fr;
-		gap: var(--space-l);
+	.tfe-main {
+		overflow-y: auto;
 	}
 
-	.tfe-file-item {
-		flex: 1 1 100%;
+	.tfe-layout {
+		height: auto;
+		min-height: auto;
+	}
+
+	.tfe-content-row {
+		grid-template-columns: 1fr;
+		flex: none;
+	}
+
+	.tfe-left-column,
+	.tfe-right-column {
+		overflow-y: visible;
 	}
 
 	.tfe-title {
diff --git a/app/templates/public/tfe.php b/app/templates/public/tfe.php
index 17dd020..1e21615 100644
--- a/app/templates/public/tfe.php
+++ b/app/templates/public/tfe.php
@@ -1,8 +1,10 @@
 <main class="tfe-main" id="main-content">
     <article class="tfe-layout">
 
-        <!-- ROW 1: Author above Title -->
-        <div class="tfe-header-row">
+        <!-- Two-column layout: left 35% (info), right 65% (files) -->
+        <div class="tfe-content-row">
+            <div class="tfe-left-column">
+
             <p class="tfe-author"><?= htmlspecialchars(
                 $data["authors"] ?? "Auteur inconnu",
             ) ?></p>
@@ -13,10 +15,7 @@
                     – <?= htmlspecialchars($data["subtitle"]) ?>
                 <?php endif; ?>
             </h1>
-        </div>
 
-        <!-- ROW 2: Two columns — meta left, synopsis right -->
-        <div class="tfe-content-row">
             <div class="tfe-meta">
                 <?php if (!empty($data["orientation"])): ?>
                 <p class="tfe-meta-item">
@@ -272,10 +271,11 @@
                 <div class="tfe-synopsis-text tfe-synopsis-empty"></div>
                 <?php endif; ?>
             </div>
-        </div>
 
-        <!-- ROW 3: All files — flex container -->
-        <div class="tfe-files">
+            </div><!-- /tfe-left-column -->
+
+            <div class="tfe-right-column">
+            <div class="tfe-files">
             <?php $_videoIndex = 0; ?>
             <?php if ($isInterdit): ?>
                 <p class="tfe-restricted">
@@ -377,14 +377,12 @@
                     <div class="tfe-file-item">
                         <?php if ($isPdf): ?>
                             <iframe src="<?= $mediaUrl ?>#toolbar=0&navpanes=0"
-                                    width="100%" height="700px"
-                                    style="border:none"
+                                    class="tfe-file-iframe"
                                     title="<?= $fileName ?>">
                             </iframe>
                         <?php elseif ($isWebsite): ?>
                             <iframe src="<?= $mediaUrl ?>"
-                                    width="100%" height="700px"
-                                    style="border:none"
+                                    class="tfe-file-iframe"
                                     title="<?= $fileName ?>"
                                     sandbox="allow-scripts allow-same-origin"
                                     loading="lazy">
@@ -452,6 +450,10 @@
             <?php else: ?>
                 <p class="tfe-no-files">Aucun fichier disponible pour ce TFE.</p>
             <?php endif; ?>
+            </div>
+
+            </div><!-- /tfe-right-column -->
+
         </div>
 
     </article>