fix: improve overview breakpoints

slidevjs · Sep 26, 2021 · 7b1ba0b · 7b1ba0b
1 parent 8c8dbcd
commit 7b1ba0b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/packages/client/internals/SlidesOverview.vue b/packages/client/internals/SlidesOverview.vue
@@ -22,15 +22,15 @@ function go(page: number) {
   close()
 }
 
+const xs = breakpoints.smaller('xs')
 const sm = breakpoints.smaller('sm')
-const md = breakpoints.smaller('md')
 
 const padding = 4 * 16 * 2
 const gap = 2 * 16
 const cardWidth = computed(() => {
-  if (sm.value)
+  if (xs.value)
     return windowSize.width.value - padding
-  else if (md.value)
+  else if (sm.value)
     return (windowSize.width.value - padding - gap) / 2
   return 300
 })

diff --git a/packages/client/state/index.ts b/packages/client/state/index.ts
@@ -8,7 +8,10 @@ export const showInfoDialog = ref(false)
 export const showGotoDialog = ref(false)
 
 export const shortcutsEnabled = ref(true)
-export const breakpoints = useBreakpoints(breakpointsTailwind)
+export const breakpoints = useBreakpoints({
+  xs: 460,
+  ...breakpointsTailwind,
+})
 export const windowSize = useWindowSize()
 export const magicKeys = useMagicKeys()
 export const isScreenVertical = computed(() => windowSize.height.value - windowSize.width.value / slideAspect > 180)