feat: remove empty space in file pages

2 files changed, 69 insertions, 40 deletions

diff --git a/public/index.php b/public/index.php
index cf88a1b..f5ea820 100644
--- a/public/index.php
+++ b/public/index.php
@@ -155,46 +155,48 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt');
                 </div>
             </div>
 
-            <section class="box">
-                <div class="tab row">
-                    <div class="grow">
-                        <?php if (isset($file['original_name'])): ?>
-                            <p><i><?= $file['original_name'] ?></i></p>
-                        <?php else: ?>
-                            <p>File <?= sprintf('%s.%s', $file['id'], $file['extension']) ?></p>
-                        <?php endif; ?>
-                    </div>
-                    <div class="grow row gap-8 justify-end align-center" id="file-tab-buttons">
-                        <?php if (FILE_REPORT): ?>
-                            <a href="/report.php?f=<?= $file['id'] ?>.<?= $file['extension'] ?>">
-                                <button>Report</button>
+            <section class="file-preview-wrapper">
+                <section class="box">
+                    <div class="tab row">
+                        <div class="grow">
+                            <?php if (isset($file['original_name'])): ?>
+                                <p><i><?= $file['original_name'] ?></i></p>
+                            <?php else: ?>
+                                <p>File <?= sprintf('%s.%s', $file['id'], $file['extension']) ?></p>
+                            <?php endif; ?>
+                        </div>
+                        <div class="grow row gap-8 justify-end align-center" id="file-tab-buttons">
+                            <?php if (FILE_REPORT): ?>
+                                <a href="/report.php?f=<?= $file['id'] ?>.<?= $file['extension'] ?>">
+                                    <button>Report</button>
+                                </a>
+                            <?php endif; ?>
+                            <a href="<?= $file['full_url'] ?>">
+                                <button>Full size</button>
                             </a>
+                            <a href="<?= $file['full_url'] ?>" download="<?= $file['name'] ?>">
+                                <button>Download</button>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="content column file-preview">
+                        <?php if (str_starts_with($file['mime'], 'image/')): ?>
+                            <img src="<?= $file['full_url'] ?>" alt="Image file.">
+                        <?php elseif (str_starts_with($file['mime'], 'video/')): ?>
+                            <video controls autoplay>
+                                <source src="<?= $file['full_url'] ?>" type="<?= $file['mime'] ?>">
+                            </video>
+                        <?php elseif (str_starts_with($file['mime'], 'audio/')): ?>
+                            <audio controls autoplay>
+                                <source src="<?= $file['full_url'] ?>" type="<?= $file['mime'] ?>">
+                            </audio>
+                        <?php elseif (str_starts_with($file['mime'], 'text/')): ?>
+                            <pre><?= file_get_contents(FILE_UPLOAD_DIRECTORY . "/{$file['id']}.{$file['extension']}") ?></pre>
+                        <?php else: ?>
+                            <p><i>This file cannot be displayed.</i></p>
                         <?php endif; ?>
-                        <a href="<?= $file['full_url'] ?>">
-                            <button>Full size</button>
-                        </a>
-                        <a href="<?= $file['full_url'] ?>" download="<?= $file['name'] ?>">
-                            <button>Download</button>
-                        </a>
                     </div>
-                </div>
-                <div class="content file-preview">
-                    <?php if (str_starts_with($file['mime'], 'image/')): ?>
-                        <img src="<?= $file['full_url'] ?>" alt="Image file.">
-                    <?php elseif (str_starts_with($file['mime'], 'video/')): ?>
-                        <video controls autoplay>
-                            <source src="<?= $file['full_url'] ?>" type="<?= $file['mime'] ?>">
-                        </video>
-                    <?php elseif (str_starts_with($file['mime'], 'audio/')): ?>
-                        <audio controls autoplay>
-                            <source src="<?= $file['full_url'] ?>" type="<?= $file['mime'] ?>">
-                        </audio>
-                    <?php elseif (str_starts_with($file['mime'], 'text/')): ?>
-                        <pre><?= file_get_contents(FILE_UPLOAD_DIRECTORY . "/{$file['id']}.{$file['extension']}") ?></pre>
-                    <?php else: ?>
-                        <p><i>This file cannot be displayed.</i></p>
-                    <?php endif; ?>
-                </div>
+                </section>
             </section>
         <?php else: ?>
             <noscript>No JavaScript Mode</noscript>
diff --git a/public/static/style.css b/public/static/style.css
index 3edf252..7d2f173 100644
--- a/public/static/style.css
+++ b/public/static/style.css
@@ -3,6 +3,7 @@
     --background-2: #f7f0f0;
     --foreground: #800;
     --box-tab-background: #efc2c2;
+    --box-tab-foreground: #800;
     --box-border: #800;
     --box-content-background: #fff;
     --box-content-background-2: #e6d9d9;
@@ -115,6 +116,8 @@ button[type=submit]:hover {
     flex-direction: row;
     align-items: center;
     gap: 8px;
+
+    color: var(--box-tab-foreground);
 }
 
 .tabs>.tab {}
@@ -128,6 +131,7 @@ button[type=submit]:hover {
 .box:has(.content)>.tab,
 .tabs>.tab:not(.disabled) {
     background: var(--box-tab-background);
+    color: var(--box-tab-foreground);
     border: 2px solid var(--box-border);
     border-bottom: none;
     padding: 8px;
@@ -145,15 +149,38 @@ button[type=submit]:hover {
     background: var(--box-content-background-2);
 }
 
+.box>.content.file-preview {
+    padding: 0;
+}
+
 /** FILES */
+.file-preview-wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+.file-preview-wrapper>.box {
+    max-width: 100%;
+}
+
+.file-preview:has(img),
+.file-preview:has(video) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 .file-preview img,
 .file-preview video {
-    width: 100%;
-    max-height: 100%;
+    max-height: 80vh;
+    max-width: 100%;
+    border: 0.5px solid black;
 }
 
 .file-preview pre {
-    width: 100%;
+    max-width: 100%;
     overflow-x: scroll;
 }