Minor UI fixes for updated Lightbox

stylesheets/components/Lightbox.scss

@@ -3,7 +3,7 @@
 
 .Lightbox {
   &__container {
-    background-color: $color-gray-90;
+    background-color: $color-black;
     bottom: 0;
     left: 0;
     position: absolute;
@@ -52,6 +52,10 @@
     }
   }
 
+  &__thumbnails_placeholder {
+    height: 44px;
+  }
+
   &__thumbnail {
     @include button-reset;
     position: relative;
@@ -210,10 +214,11 @@
   &__header {
     align-items: center;
     display: flex;
-    height: 56px;
+    height: 52px;
     justify-content: space-between;
-    margin-top: calc(12px + var(--title-bar-drag-area-height));
+    margin-top: var(--title-bar-drag-area-height);
-    min-height: 56px;
+    margin-bottom: 16px;
+    min-height: 52px;
     opacity: 1;
     padding: 0 16px;
     transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1);
@@ -239,7 +244,7 @@
 
   &__footer {
     opacity: 1;
-    padding: 20px 16px;
+    padding: 16px 16px 24px 16px;
     transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1);
   }
 
@@ -250,6 +255,17 @@
     }
   }
 
+  &__container--has-controls {
+    .Lightbox__nav-next,
+    .Lightbox__nav-prev {
+      // Give some room for <video/>'s controls.
+      $controls-height: 64px;
+
+      padding-top: $controls-height;
+      height: calc(100% - $controls-height);
+    }
+  }
+
   &__controls {
     display: flex;
     gap: 32px;

ts/components/Lightbox.tsx

@@ -430,7 +430,7 @@ export function Lightbox({
   const caption = attachment?.caption;
 
   let content: JSX.Element;
-  let hasFooter = true;
+  let hasControls = false;
   if (!contentType) {
     content = <>{children}</>;
   } else {
@@ -498,7 +498,7 @@ export function Lightbox({
         </video>
       );
 
-      hasFooter = false;
+      hasControls = true;
     } else if (isUnsupportedImageType || isUnsupportedVideoType) {
       content = (
         <button
@@ -536,6 +536,7 @@ export function Lightbox({
         <div
           className={classNames('Lightbox Lightbox__container', {
             'Lightbox__container--zoom': isZoomed,
+            'Lightbox__container--has-controls': hasControls,
           })}
           onClick={(event: React.MouseEvent<HTMLDivElement>) => {
             event.stopPropagation();
@@ -633,7 +634,6 @@ export function Lightbox({
                 )}
               </animated.div>
             </div>
-            {hasFooter ? (
             <div className="Lightbox__footer">
               {isViewOnce && videoTime ? (
                 <div className="Lightbox__timestamp">
@@ -643,7 +643,7 @@ export function Lightbox({
               {caption ? (
                 <div className="Lightbox__caption">{caption}</div>
               ) : null}
-                {media.length > 1 && (
+              {media.length > 1 ? (
                 <div className="Lightbox__thumbnails--container">
                   <div
                     className="Lightbox__thumbnails"
@@ -662,10 +662,7 @@ export function Lightbox({
                         key={item.thumbnailObjectUrl}
                         type="button"
                         onClick={(
-                            event: React.MouseEvent<
+                          event: React.MouseEvent<HTMLButtonElement, MouseEvent>
-                              HTMLButtonElement,
-                              MouseEvent
-                            >
                         ) => {
                           event.stopPropagation();
                           event.preventDefault();
@@ -685,9 +682,10 @@ export function Lightbox({
                     ))}
                   </div>
                 </div>
+              ) : (
+                <div className="Lightbox__thumbnails_placeholder" />
               )}
             </div>
-            ) : null}
           </div>
         </div>,
         root