Remove fullscreen in favour of hiding info panel

gallery/static/sass/components/image-view/info-tab.sass

@@ -1,6 +1,10 @@
 .info-container
     width: 25rem
-    height: 100%
+    height: 100vh
+
+    position: absolute
+    top: 0
+    left: 0
 
     display: flex
     flex-direction: column
@@ -9,10 +13,11 @@
     background-color: RGB($bg-200)
 
     overflow-y: auto
-    transition: transform 0.3s cubic-bezier(.79, .14, .15, .86)
+    z-index: +4
+    transition: left 0.3s cubic-bezier(0.76, 0, 0.17, 1)
 
     &.collapsed
-        transform: translateX(-25rem)
+        left: -25rem
 
 .info-tab
     width: 100%
@@ -38,6 +43,9 @@
             opacity: 0
 
 .collapse-indicator
+    margin: 0
+    padding: 0
+
     width: 1.25rem
     height: 1.25rem
 
@@ -45,12 +53,14 @@
     top: 0.6rem
     right: 0.6rem
 
+    background-color: transparent
     color: RGB($primary)
+    border: none
 
     z-index: +2
 
     transition: transform 0.15s cubic-bezier(.79, .14, .15, .86)
-    user-select: none
+    cursor: pointer
 
 .info-header
     margin: 0
@@ -209,4 +219,14 @@
 
 @media (max-width: 1100px)
     .info-container
+        width: 100%
+        height: 100%
+
+        position: relative
+
+        display: flex
+        flex-direction: column
         gap: 0.5rem
+
+        &.collapsed
+            left: unset

gallery/static/sass/components/image-view/view.sass

@@ -12,47 +12,63 @@
 
     position: relative
 
-    display: grid
-    grid-template-areas: 'info image' 'info tools'
-    grid-template-columns: 25rem 1fr
-    grid-template-rows: 1fr auto
-    gap: 0
-
+    display: flex
+    flex-direction: column
+    gap: 0.5rem
     z-index: 3
 
-    &.collapse
-        grid-template-columns: 0rem 1fr
+    .image-block
+        margin: 0 0 0 25rem
+        padding: 0
 
-#image-info
-    grid-area: info
-#image-tools
-    grid-area: tools
-    padding: 0 0 0.5rem 0
-#image-container
-    grid-area: image
+        width: calc(100% - 25rem)
+        height: 100vh
+
+        position: relative
+
+        display: flex
+        flex-direction: column
+        gap: 0
+
+        z-index: 3
+        transition: margin 0.3s cubic-bezier(0.76, 0, 0.17, 1), width 0.3s cubic-bezier(0.76, 0, 0.17, 1)
+
+        .pill-row
+            margin-bottom: 0.5rem
+
+    &.collapsed
+        .image-block
+            margin: 0
+            width: 100%
 
 
 @media (max-width: 1100px)
     .image-grid
         padding: 0.5rem
-
-        display: flex
-        flex-direction: column
-        gap: 0.5rem
-
         height: auto
 
-    .image-container
-        margin: 0 auto
-        padding: 0
+        .image-block
+            margin: 0
+            width: 100%
+            height: auto
 
-        max-height: 69vh
+            gap: 0.5rem
 
-        img
-            max-height: 69vh
+            transition: margin 0s, width 0s
 
-    #image-tools
-        padding: 0
+            .image-container
+                margin: 0 auto
+                padding: 0
+                max-height: 69vh
+
+                img
+                    max-height: 69vh
+
+            .pill-row
+                margin-bottom: 0
+
+                #fullscreenImage
+                    display: none
 
     .info-container
         background: transparent