From f8d80730fe7cee8d3203a8049b60ea05cae1435e Mon Sep 17 00:00:00 2001 From: Enrico Ros Date: Tue, 10 Jun 2025 11:00:14 -0700 Subject: [PATCH] Mobile: Panes: larger items --- src/common/layout/optima/panel/DesktopPanel.tsx | 5 ++++- src/common/layout/optima/panel/OptimaPanelGroupedList.tsx | 5 ++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/common/layout/optima/panel/DesktopPanel.tsx b/src/common/layout/optima/panel/DesktopPanel.tsx index 3ed269387..accc716fb 100644 --- a/src/common/layout/optima/panel/DesktopPanel.tsx +++ b/src/common/layout/optima/panel/DesktopPanel.tsx @@ -5,6 +5,7 @@ import { Box, List, Sheet, styled } from '@mui/joy'; import { NavItemApp } from '~/common/app.nav'; import { themeScalingMap, themeZIndexDesktopPanel } from '~/common/app.theme'; +import { useIsMobile } from '~/common/components/useMatchMedia'; import { useUIContentScaling } from '~/common/stores/store-ui'; import { PanelContentPortal } from './PanelContentPortal'; @@ -64,7 +65,9 @@ const sheetClosedSx: SxProps = { export function DesktopPanel(props: { component: React.ElementType, currentApp?: NavItemApp }) { // external state - const contentScaling = useUIContentScaling(); + const isMobile = useIsMobile(); + const _contentScaling = useUIContentScaling(); + const contentScaling = isMobile ? 'md' : _contentScaling; const { panelShownAsPanel: isOpen, panelAsPopup } = useOptimaPanelOpen(false, props.currentApp); // Close the panel if the current page goes for a popup instead diff --git a/src/common/layout/optima/panel/OptimaPanelGroupedList.tsx b/src/common/layout/optima/panel/OptimaPanelGroupedList.tsx index 41c937771..83871a445 100644 --- a/src/common/layout/optima/panel/OptimaPanelGroupedList.tsx +++ b/src/common/layout/optima/panel/OptimaPanelGroupedList.tsx @@ -5,6 +5,7 @@ import { Box, Checkbox, MenuList } from '@mui/joy'; import { ExpanderControlledBox } from '~/common/components/ExpanderControlledBox'; import { themeScalingMap } from '~/common/app.theme'; +import { useIsMobile } from '~/common/components/useMatchMedia'; import { useUIContentScaling } from '~/common/stores/store-ui'; import { OPTIMA_PANEL_GROUPS_SPACING } from '../optima.config'; @@ -97,7 +98,9 @@ export function OptimaPanelGroupedList(props: { const [_expanded, setExpanded] = React.useState(props.startExpanded === true); // external state - const contentScaling = useUIContentScaling(); + const isMobile = useIsMobile(); + const _contentScaling = useUIContentScaling(); + const contentScaling = isMobile ? 'md' : _contentScaling; // derived state const isCollapsible = !!props.persistentCollapsibleId;