Fix image and grid not full height when in fullscreen mode

Author: Correct-Syntax

src/app/globals.css

@@ -20,6 +20,11 @@ body {
   height: calc(100vh - 48px);
 }
 
+#main.fullscreen {
+  width: auto;
+  height: 100vh !important;
+}
+
 #main .fullscreen,
 .fullscreen #imageCanvas img,
 .fullscreen #uploadArea {
@@ -34,6 +39,10 @@ body {
   max-height: calc(100vh - 48px);
 }
 
+#imageCanvas.fs img {
+  max-height: 100vh !important;
+}
+
 #uploadArea {
   width: 100%;
   height: 100%;
@@ -53,6 +62,10 @@ body {
   max-height: calc(100vh - 48px);
 }
 
+.fs.grid-overlay {
+  max-height: 100vh !important;
+}
+
 /* None */
 .grid-none #horizontalTop,
 .grid-none #horizontalBottom,

src/app/page.js

@@ -156,7 +156,7 @@ export default function Home() {
 
       <main id="main" className={`flex justify-center items-center py-6 ${isFullscreen ? "fullscreen" : ""}`}>
         {file == null ? <UploadArea fileIsValid={fileIsValid} onFileUpload={handleFileUpload} onFileDrop={handleFileDrop}></UploadArea> :
-          <ImageCanvas file={file} imageFilters={imageFilters} gridMode={gridMode} onFileDrop={handleFileDrop}></ImageCanvas>}
+          <ImageCanvas file={file} imageFilters={imageFilters} gridMode={gridMode} onFileDrop={handleFileDrop} isFullscreen={isFullscreen}></ImageCanvas>}
       </main>
     </div>
   );

src/components/ImageCanvas.js

@@ -28,7 +28,7 @@ function gridClassesFromId(gridModeId) {
     }
 }
 
-export default function ImageCanvas({ file, imageFilters, gridMode, onFileDrop }) {
+export default function ImageCanvas({ file, imageFilters, gridMode, onFileDrop, isFullscreen }) {
     // List containing the one/two filter ids that are active.
     var activeIds = [];
     for (var i = 0; i < imageFilters.length; i++) {
@@ -38,7 +38,7 @@ export default function ImageCanvas({ file, imageFilters, gridMode, onFileDrop }
     }
     var showSlider = imageFilters.filter(i => i == true).length > 1;
     return (
-        <div onDrop={(event) => onFileDrop(event)} onDragOver={(event) => event.preventDefault()} id="imageCanvas" className={`relative w-auto grid-overlay ${gridClassesFromId(gridMode)}`}>
+        <div onDrop={(event) => onFileDrop(event)} onDragOver={(event) => event.preventDefault()} id="imageCanvas" className={`relative w-auto grid-overlay ${gridClassesFromId(gridMode)} ${isFullscreen == true ? "fs" : ""}`}>
             <div id="horizontalTop" className="absolute z-40 w-full h-[1px] bg-white/50"></div>
             <div id="horizontalBottom" className="absolute z-40 w-full h-[1px] bg-white/50"></div>
             <div id="verticalLeft" className="absolute z-40 w-[1px] h-full bg-white/50"></div>