feat: Added windi css screen and removed a good portion of conditional class for mobile

packages/nc-gui/assets/style.scss

@@ -48,9 +48,6 @@ main {
   @apply m-0 h-full w-full bg-white;
 }
 
-.nc-app.mobile *:hover {
-  background-color:unset!important;
-}
 
 .nc-input-md {
   @apply !rounded-lg !py-2 !px-3 mb-1;
@@ -600,6 +597,10 @@ input[type='number'] {
   @apply !block !py-1.5;
 }
 
+.nc-sidebar-node {
+  @apply !sm:h-8.9;
+}
+
 .nc-button.ant-btn.nc-sidebar-node-btn {
   @apply opacity-0 group-hover:(opacity-100) text-gray-600 hover:(bg-gray-400 bg-opacity-20 text-gray-900) duration-100;
 }

packages/nc-gui/components/dashboard/Sidebar/Header.vue

@@ -10,11 +10,7 @@ const { isMobileMode } = useGlobal()
 
 <template>
   <div
-    class="flex items-center nc-sidebar-header w-full border-b-1 border-gray-200 group"
-    :class="{
-      'px-2 py-1.2': isMobileMode,
-      'px-1 py-1': isMobileMode,
-    }"
+    class="flex items-center nc-sidebar-header w-full border-b-1 border-gray-200 group sm:(px-2 py-1.2) md:(px-1 py-1)"
     :data-workspace-title="activeWorkspace?.title"
     style="height: var(--topbar-height)"
   >
@@ -41,10 +37,7 @@ const { isMobileMode } = useGlobal()
         <NcButton
           :type="isMobileMode ? 'secondary' : 'text'"
           :size="isMobileMode ? 'medium' : 'small'"
-          class="nc-sidebar-left-toggle-icon !text-gray-700 !hover:text-gray-800 !hover:bg-gray-200"
-          :class="{
-            '!h-10.5 !max-h-10.5 !max-w-10.5': isMobileMode,
-          }"
+          class="nc-sidebar-left-toggle-icon !text-gray-700 !hover:text-gray-800 !sm:(h-10.5 max-h-10.5 max-w-10.5) !md:(hover:bg-gray-200)"
           @click="isLeftSidebarOpen = !isLeftSidebarOpen"
         >
           <div class="flex items-center text-inherit">

packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue

@@ -383,7 +383,7 @@ const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string
             'hover:bg-gray-200': !(activeProjectId === project.id && projectViewOpen),
           }"
           :data-testid="`nc-sidebar-project-title-${project.title}`"
-          class="project-title-node h-7.25 flex-grow rounded-md group flex items-center w-full pr-1"
+          class="nc-sidebar-node project-title-node h-7.25 flex-grow rounded-md group flex items-center w-full pr-1"
         >
           <NcButton
             type="text"

packages/nc-gui/components/dashboard/TreeView/TableNode.vue

@@ -131,7 +131,7 @@ const isTableOpened = computed(() => {
     :data-active="openedTableId === table.id"
   >
     <GeneralTooltip
-      class="nc-tree-item-inner pl-11 pr-0.75 mb-0.25 rounded-md h-7.1 w-full group cursor-pointer hover:bg-gray-200"
+      class="nc-tree-item-inner nc-sidebar-node pl-11 pr-0.75 mb-0.25 rounded-md h-7.1 w-full group cursor-pointer hover:bg-gray-200"
       :class="{
         'hover:bg-gray-200': openedTableId !== table.id,
         'pl-12': baseIndex !== 0,

packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue

@@ -210,7 +210,7 @@ function onRef(el: HTMLElement) {
 
 <template>
   <a-menu-item
-    class="!min-h-7 !max-h-7 !mb-0.25 select-none group text-gray-700 !flex !items-center !mt-0 hover:(!bg-gray-200 !text-gray-900) cursor-pointer"
+    class="nc-sidebar-node !min-h-7 !max-h-7 !mb-0.25 select-none group text-gray-700 !flex !items-center !mt-0 hover:(!bg-gray-200 !text-gray-900) cursor-pointer"
     :class="{
       '!pl-18': isDefaultBase,
       '!pl-23.5': !isDefaultBase,

packages/nc-gui/components/nc/Button.vue

@@ -41,8 +41,6 @@ const type = computed(() => props.type)
 
 const loading = useVModel(props, 'loading', emits)
 
-const { isMobileMode } = useGlobal()
-
 const isFocused = ref(false)
 const isClicked = ref(false)
 
@@ -86,7 +84,6 @@ useEventListener(NcButton, 'mousedown', () => {
       xsmall: size === 'xsmall',
       xxsmall: size === 'xxsmall',
       focused: isFocused,
-      mobile: isMobileMode,
     }"
     @focus="onFocus"
     @blur="onBlur"
@@ -140,12 +137,9 @@ useEventListener(NcButton, 'mousedown', () => {
 }
 
 .nc-button {
-  box-shadow: 0px 5px 3px -2px rgba(0, 0, 0, 0.02), 0px 3px 1px -2px rgba(0, 0, 0, 0.06);
-  outline: none;
-}
+  @apply !sm:(outline-none)
 
-.nc-button.mobile {
-  box-shadow: none;
+  box-shadow: 0px 5px 3px -2px rgba(0, 0, 0, 0.02), 0px 3px 1px -2px rgba(0, 0, 0, 0.06);
   outline: none;
 }
 
@@ -167,16 +161,8 @@ useEventListener(NcButton, 'mousedown', () => {
   @apply py-1 px-1.75 h-8 min-w-8;
 }
 
-.desktop {
-  .nc-button.ant-btn.medium {
-    @apply py-2 px-4 h-10 min-w-10;
-  }
-}
-
-.mobile {
-  .nc-button.ant-btn.medium {
-    @apply h-10.5 max-h-10.5 min-w-10.5 !px-3;
-  }
+.nc-button.ant-btn.medium {
+  @apply py-2 px-4 h-10 min-w-10 sm:(h-10.5 max-h-10.5 min-w-10.5 !px-3);
 }
 
 .nc-button.ant-btn.xsmall {
@@ -189,7 +175,7 @@ useEventListener(NcButton, 'mousedown', () => {
 
 .nc-button.ant-btn[disabled] {
   box-shadow: none !important;
-  @apply bg-gray-50 hover:bg-gray-50 border-0 text-gray-300 cursor-not-allowed;
+  @apply bg-gray-50 border-0 text-gray-300 cursor-not-allowed md:(hover:bg-gray-50);
 }
 
 .nc-button.ant-btn-text.ant-btn[disabled] {
@@ -201,27 +187,15 @@ useEventListener(NcButton, 'mousedown', () => {
 }
 
 .nc-button.ant-btn-primary {
-  @apply bg-brand-500 border-0 text-white;
-
-  &:hover {
-    @apply bg-brand-600 border-0;
-  }
+  @apply bg-brand-500 border-0 text-white sm:(hover:border-0) md:(hover:bg-brand-600);
 }
 
 .nc-button.ant-btn-secondary {
-  @apply bg-white border-1 border-gray-200 text-gray-700;
-
-  &:hover {
-    @apply bg-gray-100;
-  }
+  @apply bg-white border-1 border-gray-200 text-gray-700 md:(hover:bg-gray-100);
 }
 
 .nc-button.ant-btn-danger {
-  @apply bg-red-500 border-0;
-
-  &:hover {
-    @apply bg-red-600 border-0;
-  }
+  @apply bg-red-500 border-0 hover:border-0 md:(hover:bg-red-600);
 }
 
 .nc-button.ant-btn-text {

packages/nc-gui/components/smartsheet/Topbar.vue

@@ -17,7 +17,7 @@ const isSharedBase = computed(() => route.value.params.typeOrId === 'base')
 
 <template>
   <div
-    class="nc-table-topbar h-20 py-1 flex gap-2 items-center pr-2 pl-2.5 border-b border-gray-200 overflow-hidden relative max-h-[var(--topbar-height)] min-h-[var(--topbar-height)]"
+    class="nc-table-topbar h-20 py-1 flex gap-2 items-center border-b border-gray-200 overflow-hidden relative max-h-[var(--topbar-height)] min-h-[var(--topbar-height)] md:(pr-2 pl-2.5) sm:(px-1)"
     style="z-index: 7"
   >
     <template v-if="isViewsLoading">

packages/nc-gui/layouts/base.vue

@@ -20,8 +20,6 @@ const logout = async () => {
 
 const { hooks } = useNuxtApp()
 
-const { isMobileMode } = useGlobal()
-
 const isDashboard = computed(() => !!route.params.typeOrId)
 
 /** when page suspensions have finished, check if a sidebar element was teleported into the layout */
@@ -33,15 +31,7 @@ hooks.hook('page:finish', () => {
 </script>
 
 <template>
-  <a-layout
-    id="nc-app"
-    class="nc-app"
-    :class="{
-      mobile: isMobileMode,
-      desktop: !isMobileMode,
-    }"
-    has-sider
-  >
+  <a-layout id="nc-app" class="nc-app" has-sider>
     <Transition name="slide">
       <div v-show="hasSider" id="nc-sidebar-left" ref="sidebar" />
     </Transition>

packages/nc-gui/store/config.ts

@@ -20,6 +20,15 @@ export const useConfigStore = defineStore('configStore', () => {
 
       // Change --topbar-height css variable
       document.documentElement.style.setProperty('--topbar-height', isMobileMode.value ? '3.25rem' : '3.1rem')
+
+      // Set .mobile-mode class on body
+      if (isMobileMode.value) {
+        document.body.classList.add('mobile')
+        document.body.classList.remove('desktop')
+      } else {
+        document.body.classList.add('desktop')
+        document.body.classList.remove('mobile')
+      }
     },
     {
       immediate: true,

packages/nc-gui/windi.config.ts

@@ -55,6 +55,14 @@ export default defineConfig({
       mono: ['Inter', 'mono'],
     },
     extend: {
+      screens: {
+        sm: {
+          max: '820px',
+        },
+        md: {
+          min: '820px',
+        },
+      },
       textColor: {
         primary: 'rgba(var(--color-primary), var(--tw-text-opacity))',
         accent: 'rgba(var(--color-accent), var(--tw-text-opacity))',