azalea/inkclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix webapp mobile layout

Browse Source
This commit is contained in:
daylily
2026-01-12 15:09:12 -06:00
parent 79b438623b
commit dfec24db24
11 changed files with 107 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/src/lib/layouts/edit/EditSection.svelte
+7 -7
View File
@@ -1,15 +1,15 @@
<script lang="ts">
import { Separator } from '$lib/components/ui/separator'
import PreviewSection from './preview/PreviewSection.svelte'
import ControlsSection from './controls/ControlsSection.svelte'
import { Separator } from '$lib/components/ui/separator'
import PreviewSection from './preview/PreviewSection.svelte'
import ControlsSection from './controls/ControlsSection.svelte'
import { createMediaQuery } from '$lib/utils/media.svelte'
import { MediaQuery } from 'svelte/reactivity'
const mobileMediaQuery = createMediaQuery('(max-width: 1024px)')
const separatorOrientation = $derived(mobileMediaQuery.matches ? 'horizontal' : 'vertical')
const mediaLg = new MediaQuery('min-width: 1024px')
const separatorOrientation = $derived(mediaLg.current ? 'vertical' : 'horizontal')
</script>
<div class="grow stack-h max-lg:stack gap-4">
<div class="grow flex flex-col lg:flex-row gap-4">
<PreviewSection />
<Separator decorative orientation={separatorOrientation} />