matteoscrugli/app-service
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mobile content padding to match desktop margins

Browse Source 
- Add page-padding-y-mobile gap after title bar offset
- Align mobile padding calculations with desktop behavior
- Update all tab position rules (top, bottom, responsive)
- Add CSS variables for mobile spacing control

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
matteoscrugli
2026-01-11 13:23:06 +01:00
parent 97494679ec
commit b2eed5375b
4 changed files with 55 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/SwipeTabs.tsx
View File

@@ -144,6 +144,10 @@ export function SwipeTabs<T extends string | number>({
setContainerHeight((prev) => (prev === nextHeight ? prev : nextHeight));
}, []);
const handleTabsMetrics = useCallback(() => {
updateHeight();
}, [updateHeight]);
const measureWidth = useCallback(() => {
const width = containerRef.current?.getBoundingClientRect().width || 0;
if (width && width !== widthRef.current) {
@@ -192,6 +196,14 @@ export function SwipeTabs<T extends string | number>({
};
}, [displayIndex, updateHeight]);
useEffect(() => {
if (typeof window === 'undefined') return undefined;
window.addEventListener('tabs:metrics', handleTabsMetrics);
return () => {
window.removeEventListener('tabs:metrics', handleTabsMetrics);
};
}, [handleTabsMetrics]);
useEffect(() => {
return () => {
if (rafRef.current) {

19
frontend/src/components/TabsScroller.tsx
View File

@@ -42,6 +42,7 @@ const TabsScroller = forwardRef<HTMLDivElement, TabsScrollerProps>(
const [showRight, setShowRight] = useState(false);
const heightRef = useRef(0);
const pillHeightRef = useRef(0);
const sliderHeightRef = useRef(0);
const dragRef = useRef({
pointerId: null as number | null,
@@ -76,12 +77,27 @@ const TabsScroller = forwardRef<HTMLDivElement, TabsScrollerProps>(
node.dataset.hasActions = hasActionsValue;
const container = node.closest('.page-tabs-container, .admin-tabs-container');
const mainContent = node.closest('.main-content');
let containerHeight = 0;
if (container instanceof HTMLElement) {
container.dataset.hasTabs = hasTabsValue;
container.dataset.hasActions = hasActionsValue;
}
const sliderHeight = Math.ceil(node.getBoundingClientRect().height);
let containerHeight = 0;
if (container instanceof HTMLElement) {
containerHeight = Math.ceil(container.getBoundingClientRect().height);
}
if (sliderHeight && sliderHeight !== sliderHeightRef.current) {
sliderHeightRef.current = sliderHeight;
if (typeof document !== 'undefined') {
document.documentElement.style.setProperty('--tabs-slider-height', `${sliderHeight}px`);
}
if (mainContent instanceof HTMLElement) {
mainContent.style.setProperty('--tabs-slider-height', `${sliderHeight}px`);
}
if (typeof window !== 'undefined') {
window.dispatchEvent(new Event('tabs:metrics'));
}
}
const firstTabButton = node.querySelector('.page-tab-btn, .admin-tab-btn');
if (firstTabButton instanceof HTMLElement) {
const pillHeight = Math.ceil(firstTabButton.getBoundingClientRect().height);
@@ -133,6 +149,7 @@ const TabsScroller = forwardRef<HTMLDivElement, TabsScrollerProps>(
useLayoutEffect(() => {
updateOverflow();
scheduleOverflowUpdate();
const node = sliderRef.current;
if (!node) return undefined;
const container = node.closest('.page-tabs-container, .admin-tabs-container');

50
frontend/src/styles/Layout.css
View File

@@ -444,6 +444,9 @@ label,
@media (max-width: 768px) {
.main-content {
margin-left: 0;
--page-padding-y-mobile-gap: var(--space-3);
--page-padding-y-mobile-bottom-gap: 0;
--tabs-slider-height-fallback: calc(var(--tab-pill-height, 44px) + 8px);
}
/* Override collapsed state margin on mobile */
@@ -564,27 +567,19 @@ label,
display: none;
}
.page-content {
padding: var(--page-padding-y-mobile) var(--page-padding-x-mobile);
padding-top: var(--title-bar-offset, var(--title-bar-height, 0px));
}
.page-content,
.admin-tab-content {
padding: var(--page-padding-y-mobile) var(--page-padding-x-mobile);
padding-top: var(--title-bar-offset, var(--title-bar-height, 0px));
padding-top: calc(var(--title-bar-offset, 0px) + var(--page-padding-y-mobile-gap, var(--page-padding-y-mobile)));
}
}
/* Small mobile - further reduce spacing */
@media (max-width: 480px) {
.page-content {
padding: var(--page-padding-y-mobile) var(--page-padding-x-mobile);
padding-top: var(--title-bar-offset, var(--title-bar-height, 0px));
}
.page-content,
.admin-tab-content {
padding: var(--page-padding-y-mobile) var(--page-padding-x-mobile);
padding-top: var(--title-bar-offset, var(--title-bar-height, 0px));
padding-top: calc(var(--title-bar-offset, 0px) + var(--page-padding-y-mobile-gap, var(--page-padding-y-mobile)));
}
}
@@ -840,8 +835,9 @@ label,
[data-tab-position='top'] .main-content[data-has-tabs='true'] .admin-tab-content,
[data-tab-position='top'] .main-content[data-has-actions='true'] .admin-tab-content {
padding-top: calc(
var(--title-bar-offset, var(--title-bar-height, 0px)) +
var(--tabs-bar-height, 72px)
var(--title-bar-offset, 0px) +
var(--tabs-bar-height, 72px) +
var(--page-padding-y-mobile-gap, var(--page-padding-y-mobile))
);
}
}
@@ -893,13 +889,11 @@ label,
padding-bottom: 0;
}
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .page-content,
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .admin-tab-swipe {
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .page-content {
padding-top: var(--page-padding-y);
}
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .page-content,
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .admin-tab-swipe,
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .admin-tab-content {
padding-bottom: calc(
var(--page-padding-y) +
@@ -929,17 +923,16 @@ label,
}
/* Mobile padding for bottom position */
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .page-content,
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .admin-tab-swipe {
padding-top: var(--title-bar-offset, var(--title-bar-height, 0px));
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .page-content {
padding-top: calc(var(--title-bar-offset, 0px) + var(--page-padding-y-mobile-gap, var(--page-padding-y-mobile)));
}
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .page-content,
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .admin-tab-swipe,
[data-tab-position='bottom'] .main-content[data-has-tabs='true'] .admin-tab-content {
padding-bottom: calc(
var(--page-padding-y-mobile) +
var(--tabs-bar-height, calc(72px + env(safe-area-inset-bottom, 0px)))
var(--page-padding-y-mobile-bottom-gap, 0px) +
var(--tabs-slider-height, var(--tabs-slider-height-fallback, 52px)) +
env(safe-area-inset-bottom, 0px)
);
}
}
@@ -971,17 +964,16 @@ label,
padding-bottom: 0;
}
[data-tab-position='responsive'] .main-content[data-has-tabs='true'] .page-content,
[data-tab-position='responsive'] .main-content[data-has-tabs='true'] .admin-tab-swipe {
padding-top: var(--title-bar-offset, var(--title-bar-height, 0px));
[data-tab-position='responsive'] .main-content[data-has-tabs='true'] .page-content {
padding-top: calc(var(--title-bar-offset, 0px) + var(--page-padding-y-mobile-gap, var(--page-padding-y-mobile)));
}
[data-tab-position='responsive'] .main-content[data-has-tabs='true'] .page-content,
[data-tab-position='responsive'] .main-content[data-has-tabs='true'] .admin-tab-swipe,
[data-tab-position='responsive'] .main-content[data-has-tabs='true'] .admin-tab-content {
padding-bottom: calc(
var(--page-padding-y-mobile) +
var(--tabs-bar-height, calc(72px + env(safe-area-inset-bottom, 0px)))
var(--page-padding-y-mobile-bottom-gap, 0px) +
var(--tabs-slider-height, var(--tabs-slider-height-fallback, 52px)) +
env(safe-area-inset-bottom, 0px)
);
}
}

4
frontend/src/styles/ThemeSettings.css
View File

@@ -1269,6 +1269,10 @@
margin-bottom: 2rem;
}
.theme-section:last-child {
margin-bottom: 0;
}
/* Appearance Grid Mobile Overrides */
.appearance-grid {
gap: 2rem;