Add smaller Mobile size values

ui/component/app/view.jsx

@@ -31,6 +31,7 @@ import {
   STATUS_DOWN,
 } from 'web/effects/use-degraded-performance';
 import LANGUAGE_MIGRATIONS from 'constants/language-migrations';
+import { useIsMobile } from 'effects/use-screensize';
 
 const FileDrop = lazyImport(() => import('component/fileDrop' /* webpackChunkName: "fileDrop" */));
 const NagContinueFirstRun = lazyImport(() => import('component/nagContinueFirstRun' /* webpackChunkName: "nagCFR" */));
@@ -122,6 +123,7 @@ function App(props: Props) {
     fetchModAmIList,
   } = props;
 
+  const isMobile = useIsMobile();
   const appRef = useRef();
   const isEnhancedLayout = useKonamiListener();
   const [hasSignedIn, setHasSignedIn] = useState(false);
@@ -154,7 +156,7 @@ function App(props: Props) {
   const shouldMigrateLanguage = LANGUAGE_MIGRATIONS[language];
   const hasActiveChannelClaim = activeChannelId !== undefined;
   const isPersonalized = !IS_WEB || hasVerifiedEmail;
-  const renderFiledrop = !IS_WEB || isAuthenticated;
+  const renderFiledrop = !isMobile && isAuthenticated;
   const isOnline = navigator.onLine;
 
   let uri;

ui/component/fileRenderFloating/view.jsx

@@ -21,6 +21,7 @@ import AutoplayCountdown from 'component/autoplayCountdown';
 // scss/init/vars.scss
 // --header-height
 const HEADER_HEIGHT = 64;
+const HEADER_HEIGHT_MOBILE = 56;
 
 const IS_DESKTOP_MAC = typeof process === 'object' ? process.platform === 'darwin' : false;
 const DEBOUNCE_WINDOW_RESIZE_HANDLER_MS = 100;
@@ -343,7 +344,11 @@ export default function FileRenderFloating(props: Props) {
                 width: fileViewerRect.width,
                 height: fileViewerRect.height,
                 left: fileViewerRect.x,
-                top: fileViewerRect.windowOffset + fileViewerRect.top - HEADER_HEIGHT - (IS_DESKTOP_MAC ? 24 : 0),
+                top:
+                  fileViewerRect.windowOffset +
+                  fileViewerRect.top -
+                  (isMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT) -
+                  (IS_DESKTOP_MAC ? 24 : 0),
               }
             : {}
         }

ui/scss/component/_header.scss

@@ -56,6 +56,7 @@
 
   @media (max-width: $breakpoint-small) {
     padding: var(--spacing-xs);
+    height: var(--header-height-mobile);
   }
 }
 
@@ -67,13 +68,10 @@
   height: var(--header-height);
   padding: var(--spacing-s) var(--spacing-m);
   flex-wrap: nowrap;
-}
 
-.card__actions--between {
+  @media (max-width: $breakpoint-small) {
-  .header__menu--left {
+    padding: var(--spacing-xs);
-    @media (max-width: $breakpoint-small) {
+    height: var(--header-height-mobile);
-      max-width: 3rem;
-    }
   }
 }
 
@@ -126,6 +124,10 @@
   &[aria-expanded='true'] {
     background-color: var(--color-header-button-active);
   }
+
+  @media (max-width: $breakpoint-small) {
+    height: var(--height-button-mobile);
+  }
 }
 
 .header__navigationItem--icon {
@@ -147,6 +149,7 @@
 
   @media (max-width: $breakpoint-small) {
     margin: 0;
+    width: var(--height-button-mobile);
   }
 
   span {
@@ -169,12 +172,26 @@
   &:hover {
     opacity: 0.7;
   }
+
+  @media (max-width: $breakpoint-small) {
+    margin: 0;
+
+    .channel-thumbnail {
+      height: var(--height-button-mobile);
+      width: var(--height-button-mobile);
+    }
+  }
 }
 
 .header__navigationItem--iconSkeleton {
   @extend .header__navigationItem--icon;
   height: var(--height-button) !important;
   width: var(--height-button) !important;
+
+  @media (max-width: $breakpoint-small) {
+    height: var(--height-button-mobile) !important;
+    width: var(--height-button-mobile) !important;
+  }
 }
 
 .header__navigationItem--balance {
@@ -185,12 +202,23 @@
   &:hover {
     color: var(--color-text);
   }
+
+  @media (max-width: $breakpoint-small) {
+    margin: 0 !important;
+    padding: 0 !important;
+    width: 5rem;
+  }
 }
 
 .header__navigationItem--balanceLoading {
   margin: 0 var(--spacing-s);
   width: 4rem;
   background-color: var(--color-header-button);
+
+  @media (max-width: $breakpoint-small) {
+    margin: 0 !important;
+    width: 5rem;
+  }
 }
 
 .header__navigationItem--logo {
@@ -254,6 +282,5 @@
 .ReactModal__Overlay {
   .button--close {
     margin: 0;
-    margin-top: var(--spacing-xxs);
   }
 }

ui/scss/component/_main.scss

@@ -26,7 +26,7 @@
 
   @media (max-width: $breakpoint-small) {
     padding: var(--spacing-xs);
-    padding-top: var(--spacing-m);
+    margin-top: var(--header-height-mobile);
   }
 
   @media (min-width: $breakpoint-large) {
@@ -86,6 +86,7 @@
 
   @media (max-width: $breakpoint-small) {
     width: 100%;
+    min-height: calc(100vh - var(--header-height-mobile));
   }
 }
 

ui/scss/component/_navigation.scss

@@ -1,6 +1,10 @@
 .navigation__wrapper {
   width: var(--side-nav-width);
   height: calc(100vh - var(--header-height));
+
+  @media (max-width: $breakpoint-small) {
+    height: calc(100vh - var(--header-height-mobile));
+  }
 }
 
 .navigation__wrapper--micro {
@@ -48,6 +52,11 @@
     }
   }
 
+  @media (max-width: $breakpoint-small) {
+    top: var(--header-height-mobile);
+    height: calc(100vh - var(--header-height-mobile));
+  }
+
   ul {
     padding-bottom: var(--spacing-s);
     border-bottom: 1px solid var(--color-border);
@@ -294,6 +303,10 @@
   &.navigation__overlay--mac {
     top: calc(var(--header-height) + var(--mac-titlebar-height));
   }
+
+  @media (max-width: $breakpoint-small) {
+    top: var(--header-height-mobile);
+  }
 }
 
 .navigation__overlay--active {

ui/scss/component/_wunderbar.scss

@@ -10,7 +10,7 @@
 .wunderbar__wrapper--mobile {
   margin: 0;
   border-bottom: 1px solid var(--color-border);
-  height: var(--header-height);
+  height: var(--header-height-mobile);
   display: flex;
   align-items: center;
   width: 100%;
@@ -113,10 +113,14 @@
   border-top: none;
   padding-top: var(--spacing-xs);
   margin: 0 var(--spacing-s);
+
+  @media (max-width: $breakpoint-small) {
+    top: calc(var(--header-height-mobile) - (var(--height-input)) + 3px);
+  }
 }
 
 .wunderbar__suggestions--mobile {
-  top: calc(var(--header-height) - var(--spacing-xs));
+  top: calc(var(--header-height-mobile) - var(--spacing-xs));
   margin-top: var(--spacing-m);
   padding: 0;
   overflow: visible;

ui/scss/init/_vars.scss

@@ -4,6 +4,7 @@
   --border-radius: 10px;
   --height-input: 2.5rem;
   --height-button: 2.5rem;
+  --height-button-mobile: 2rem;
   --height-checkbox: 24px;
   --height-radio: 24px;
   --height-badge: 24px;
@@ -67,6 +68,7 @@
   // This is tied to the floating player so it knows where to attach to
   // ui/component/fileRenderFloating/view.jsx
   --header-height: 64px;
+  --header-height-mobile: 56px;
 
   // Inline Player
   --inline-player-max-height: calc(100vh - var(--header-height) - var(--spacing-l) * 4);