Skip to content

Commit 6b95ac6

Browse files
committed
fix: improve Rotator and Doppler mobile layout
- Pass headerExtra to MobileSheet so tab buttons appear on mobile - Change tab content panels from fixed width: 400px to width: 100%; max-width: 400px so they fit the mobile sheet - Set radar canvas touch-action to pan-y on mobile so the sheet can be scrolled past the radar
1 parent b5d7d1b commit 6b95ac6

2 files changed

Lines changed: 12 additions & 7 deletions

File tree

src/ui/DopplerWindow.svelte

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -995,14 +995,16 @@
995995
996996
/* ── Console tab ── */
997997
.console-tab {
998-
width: 400px;
998+
width: 100%;
999+
max-width: 400px;
9991000
height: 240px;
10001001
}
10011002
10021003
/* ── Setup tab ── */
10031004
.setup-panel {
10041005
padding: 12px 14px;
1005-
width: 400px;
1006+
width: 100%;
1007+
max-width: 400px;
10061008
box-sizing: border-box;
10071009
}
10081010
.section-header {

src/ui/RotatorWindow.svelte

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1019,7 +1019,7 @@
10191019
<canvas
10201020
bind:this={canvasEl}
10211021
width={SIZE} height={SIZE + INFO_H}
1022-
style="touch-action:none; cursor:crosshair; width:{SIZE}px; height:{SIZE + INFO_H}px"
1022+
style="touch-action:{uiStore.isMobile ? 'pan-y' : 'none'}; cursor:crosshair; width:{SIZE}px; height:{SIZE + INFO_H}px"
10231023
onpointermove={onCanvasPointerMove}
10241024
onpointerdown={onCanvasPointerDown}
10251025
onpointerup={onCanvasPointerUp}
@@ -1246,7 +1246,7 @@
12461246
{/snippet}
12471247

12481248
{#if uiStore.isMobile}
1249-
<MobileSheet id="rotator" title="Rotator" icon={radarIcon}>
1249+
<MobileSheet id="rotator" title="Rotator" icon={radarIcon} {headerExtra}>
12501250
{@render windowContent()}
12511251
</MobileSheet>
12521252
{:else}
@@ -1264,7 +1264,8 @@
12641264
margin-right: 8px;
12651265
}
12661266
.radar-tab {
1267-
width: 400px;
1267+
width: 100%;
1268+
max-width: 400px;
12681269
}
12691270
.radar {
12701271
position: relative;
@@ -1488,7 +1489,8 @@
14881489
14891490
/* ── Console tab ── */
14901491
.console-tab {
1491-
width: 400px;
1492+
width: 100%;
1493+
max-width: 400px;
14921494
}
14931495
.console-area {
14941496
height: 420px;
@@ -1507,7 +1509,8 @@
15071509
/* ── Setup tab ── */
15081510
.setup-panel {
15091511
padding: 12px 14px;
1510-
width: 400px;
1512+
width: 100%;
1513+
max-width: 400px;
15111514
box-sizing: border-box;
15121515
}
15131516
.section-header {

0 commit comments

Comments
 (0)