Hide actions on mobile

packages/frontend-2/components/viewer/Sidebar.vue

@@ -15,7 +15,7 @@
       />
 
       <div
-        class="flex flex-col w-full h-full relative z-20 overflow-hidden sm:rounded-lg lg:rounded-none border-l sm:border lg:border-0 lg:border-l border-outline-2 bg-foundation"
+        class="flex flex-col w-full h-full relative z-20 overflow-hidden sm:rounded-lg lg:rounded-none border-l border-t sm:border lg:border-0 lg:border-l border-outline-2 bg-foundation"
       >
         <div
           class="h-10 pl-4 pr-2 flex items-center justify-between border-b border-outline-2"

packages/frontend-2/components/viewer/controls/Bottom.vue

@@ -11,6 +11,7 @@
         v-tippy="getTooltipProps(panel.tooltip)"
         :active="activePanel === panel.id"
         :icon="panel.icon"
+        :class="panel.extraClasses"
         @click="toggleActivePanel(panel.id)"
       />
     </ViewerControlsButtonGroup>
@@ -76,31 +77,36 @@ const panels = shallowRef({
     id: ActivePanel.measurements,
     name: 'Measure',
     icon: 'IconViewerMeasurements',
-    tooltip: getShortcutDisplayText(shortcuts.ToggleMeasurements)
+    tooltip: getShortcutDisplayText(shortcuts.ToggleMeasurements),
+    extraClasses: 'hidden md:flex'
   },
   [ActivePanel.sectionBox]: {
     id: ActivePanel.sectionBox,
     name: 'Section',
     icon: 'IconViewerSectionBox',
-    tooltip: getShortcutDisplayText(shortcuts.ToggleSectionBox)
+    tooltip: getShortcutDisplayText(shortcuts.ToggleSectionBox),
+    extraClasses: ''
   },
   [ActivePanel.explode]: {
     id: ActivePanel.explode,
     name: 'Explode',
     icon: 'IconViewerExplode',
-    tooltip: 'Explode model'
+    tooltip: 'Explode model',
+    extraClasses: 'hidden md:flex'
   },
   [ActivePanel.viewModes]: {
     id: ActivePanel.viewModes,
     name: 'View modes',
     icon: 'IconViewerViewModes',
-    tooltip: 'View modes'
+    tooltip: 'View modes',
+    extraClasses: ''
   },
   [ActivePanel.lightControls]: {
     id: ActivePanel.lightControls,
     name: 'Light controls',
     icon: 'IconViewerLightControls',
-    tooltip: 'Light controls'
+    tooltip: 'Light controls',
+    extraClasses: 'hidden md:flex'
   }
 })
 

packages/frontend-2/pages/projects/[id]/models/[modelId]/index.vue

@@ -7,7 +7,7 @@
         :is="state ? ViewerScope : 'div'"
         :state="state"
         wrapper
-        class="main-viewer-scope fixed shadow-t bottom-0 left-0 max-h-[65vh] overflow-hidden w-screen z-50 transition-all duration-300 empty:-bottom-[65vh]"
+        class="main-viewer-scope fixed bottom-0 left-0 max-h-[65vh] overflow-hidden w-screen z-50 transition-all duration-300 empty:-bottom-[65vh]"
       >
         <PortalTarget name="bottomPanel"></PortalTarget>
         <PortalTarget name="mobileComments"></PortalTarget>