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

Refactor SwipeTabs for smoother touch transitions

Browse Source 
- Rewrite SwipeTabs with improved touch handling and animation
- Use translate3d with smoother easing curve (280ms)
- Add coalesced pointer events for high refresh rate displays
- Clean up redundant CSS styles across multiple files
- Add page-max-width dimension variable

🤖 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
2025-12-21 23:08:29 +01:00
parent abd8f75efc
commit e83d62a240
13 changed files with 486 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,323 +1,455 @@
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
import type { CSSProperties, ReactNode } from 'react';
import {
useCallback,
useEffect,
useLayoutEffect,
useMemo,
useRef,
useState,
type PointerEvent,
type ReactNode,
type TouchEvent,
type TransitionEvent
} from 'react';
type SwipeTabsProps<T extends string> = {
tabs: readonly T[];
type SwipeTabsProps<T extends string | number> = {
tabs: T[];
activeTab: T;
onTabChange: (tab: T) => void;
renderPanel: (tab: T) => ReactNode;
className?: string;
panelClassName?: string;
renderWindow?: number;
swipeDisabled?: boolean;
threshold?: number;
directionRatio?: number;
respectScrollableTargets?: boolean;
renderWindow?: number;
};
const SCROLL_END_DELAY = 120;
const COARSE_POINTER_QUERY = '(pointer: coarse)';
const NO_HOVER_QUERY = '(hover: none)';
const FALLBACK_WIDTH_QUERY = '(max-width: 1024px)';
const DRAG_START_DISTANCE = 3;
const EDGE_RESISTANCE = 0.35;
const DEFAULT_THRESHOLD = 0.2;
const DEFAULT_RENDER_WINDOW = 1;
const getSwipeEnabled = () => {
if (typeof window === 'undefined' || !window.matchMedia) return false;
const coarsePointer = window.matchMedia(COARSE_POINTER_QUERY).matches;
const noHover = window.matchMedia(NO_HOVER_QUERY).matches;
if (coarsePointer || noHover) return true;
const supportsTouch = ('ontouchstart' in window)
|| (typeof navigator !== 'undefined' && navigator.maxTouchPoints > 0);
if (!supportsTouch) return false;
return window.matchMedia(FALLBACK_WIDTH_QUERY).matches;
const findTouchById = (touches: TouchList, id: number) => {
for (let i = 0; i < touches.length; i += 1) {
const touch = touches[i];
if (touch.identifier === id) {
return touch;
}
}
return null;
};
export function SwipeTabs<T extends string>({
export function SwipeTabs<T extends string | number>({
tabs,
activeTab,
onTabChange,
renderPanel,
className,
panelClassName,
renderWindow = 0,
swipeDisabled = false,
threshold = DEFAULT_THRESHOLD,
renderWindow = DEFAULT_RENDER_WINDOW
}: SwipeTabsProps<T>) {
const containerRef = useRef<HTMLDivElement | null>(null);
const panelRefs = useRef(new Map<T, HTMLDivElement>());
const activeIndex = tabs.indexOf(activeTab);
const safeActiveIndex = activeIndex >= 0 ? activeIndex : 0;
const maxIndex = Math.max(0, tabs.length - 1);
const containerRef = useRef<HTMLDivElement>(null);
const trackRef = useRef<HTMLDivElement>(null);
const activeIndex = useMemo(() => {
const index = tabs.indexOf(activeTab);
return index >= 0 ? index : 0;
}, [tabs, activeTab]);
const [containerWidth, setContainerWidth] = useState(0);
const [containerHeight, setContainerHeight] = useState<number | null>(null);
const [isScrolling, setIsScrolling] = useState(false);
const [scrollPosition, setScrollPosition] = useState(0);
const [swipeEnabled, setSwipeEnabled] = useState(() => getSwipeEnabled());
const scrollEndTimer = useRef<number | null>(null);
const scrollRaf = useRef<number | null>(null);
const scrollPositionRef = useRef(0);
const isUserScrolling = useRef(false);
const hasMounted = useRef(false);
const lastReportedIndex = useRef(safeActiveIndex);
const prefersReducedMotion = useMemo(() => {
if (typeof window === 'undefined' || !window.matchMedia) return true;
return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
}, []);
useEffect(() => {
if (typeof window === 'undefined' || !window.matchMedia) return;
const pointerMql = window.matchMedia(COARSE_POINTER_QUERY);
const hoverMql = window.matchMedia(NO_HOVER_QUERY);
const widthMql = window.matchMedia(FALLBACK_WIDTH_QUERY);
const update = () => setSwipeEnabled(getSwipeEnabled());
update();
const addListener = (mql: MediaQueryList) => {
if (mql.addEventListener) {
mql.addEventListener('change', update);
return;
}
mql.addListener(update);
};
const removeListener = (mql: MediaQueryList) => {
if (mql.removeEventListener) {
mql.removeEventListener('change', update);
return;
}
mql.removeListener(update);
};
addListener(pointerMql);
addListener(hoverMql);
addListener(widthMql);
return () => {
removeListener(pointerMql);
removeListener(hoverMql);
removeListener(widthMql);
};
}, []);
useEffect(() => {
if (!containerRef.current) return;
const element = containerRef.current;
const updateSize = () => {
const styles = window.getComputedStyle(element);
const paddingX = parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight);
const width = element.clientWidth - (Number.isFinite(paddingX) ? paddingX : 0);
setContainerWidth(width > 0 ? width : element.clientWidth);
};
updateSize();
if (typeof ResizeObserver === 'undefined') {
window.addEventListener('resize', updateSize);
return () => window.removeEventListener('resize', updateSize);
}
const observer = new ResizeObserver(updateSize);
observer.observe(element);
return () => observer.disconnect();
}, []);
useEffect(() => {
const panel = panelRefs.current.get(activeTab);
if (!panel) {
setContainerHeight(null);
return;
}
const updateHeight = () => setContainerHeight(panel.offsetHeight);
updateHeight();
if (typeof ResizeObserver === 'undefined') {
window.addEventListener('resize', updateHeight);
return () => window.removeEventListener('resize', updateHeight);
}
const observer = new ResizeObserver(updateHeight);
observer.observe(panel);
return () => observer.disconnect();
}, [activeTab]);
useEffect(() => {
return () => {
if (scrollEndTimer.current !== null) {
window.clearTimeout(scrollEndTimer.current);
}
if (scrollRaf.current !== null) {
cancelAnimationFrame(scrollRaf.current);
}
};
}, []);
useEffect(() => {
lastReportedIndex.current = safeActiveIndex;
}, [safeActiveIndex]);
const scrollToIndex = useCallback((index: number, behavior: ScrollBehavior) => {
const container = containerRef.current;
if (!container || containerWidth <= 0) return;
const targetLeft = index * containerWidth;
if (Math.abs(container.scrollLeft - targetLeft) <= 1) return;
container.scrollTo({ left: targetLeft, behavior });
}, [containerWidth]);
const scheduleScrollPositionUpdate = useCallback(() => {
if (scrollRaf.current !== null) return;
scrollRaf.current = window.requestAnimationFrame(() => {
scrollRaf.current = null;
setScrollPosition(scrollPositionRef.current);
const [displayIndex, setDisplayIndex] = useState(activeIndex);
const displayIndexRef = useRef(displayIndex);
const widthRef = useRef(0);
const baseOffsetRef = useRef(0);
const dragOffsetRef = useRef(0);
const rafRef = useRef(0);
const isDraggingRef = useRef(false);
const hasMountedRef = useRef(false);
const transitionRef = useRef<string | null>(null);
const transformRef = useRef<string | null>(null);
const pendingIndexRef = useRef<number | null>(null);
const isAnimatingRef = useRef(false);
const needsResetRef = useRef(false);
const dragRef = useRef({
pointerId: null as number | null,
touchId: null as number | null,
startX: 0,
startY: 0,
startIndex: 0,
isActive: false,
isDragging: false
});
const applyTransform = useCallback((offset: number, animate: boolean) => {
const track = trackRef.current;
if (!track) return;
const translateX = baseOffsetRef.current + offset;
const transform = `translate3d(${translateX}px, 0, 0)`;
if (transformRef.current !== transform) {
track.style.transform = transform;
transformRef.current = transform;
}
const transition = animate
? 'transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1)'
: 'none';
if (transitionRef.current !== transition) {
track.style.transition = transition;
transitionRef.current = transition;
}
}, []);
const handleScroll = useCallback(() => {
if (!swipeEnabled) return;
const container = containerRef.current;
if (!container || containerWidth <= 0) return;
if (!isUserScrolling.current) {
isUserScrolling.current = true;
setIsScrolling(true);
const measureWidth = useCallback(() => {
const width = containerRef.current?.getBoundingClientRect().width || 0;
if (width && width !== widthRef.current) {
widthRef.current = width;
baseOffsetRef.current = -width;
applyTransform(dragOffsetRef.current, false);
}
const rawIndex = container.scrollLeft / containerWidth;
scrollPositionRef.current = rawIndex;
scheduleScrollPositionUpdate();
const roundedIndex = Math.round(rawIndex);
const clampedIndex = Math.max(0, Math.min(roundedIndex, maxIndex));
if (tabs[clampedIndex] && clampedIndex !== lastReportedIndex.current) {
lastReportedIndex.current = clampedIndex;
onTabChange(tabs[clampedIndex]);
}
if (scrollEndTimer.current !== null) {
window.clearTimeout(scrollEndTimer.current);
}
scrollEndTimer.current = window.setTimeout(() => {
const rawIndex = container.scrollLeft / containerWidth;
const nextIndex = Math.round(rawIndex);
const clampedIndex = Math.max(0, Math.min(nextIndex, maxIndex));
const targetLeft = clampedIndex * containerWidth;
if (Math.abs(container.scrollLeft - targetLeft) > 1) {
container.scrollTo({ left: targetLeft, behavior: 'auto' });
}
if (tabs[clampedIndex] && clampedIndex !== lastReportedIndex.current) {
lastReportedIndex.current = clampedIndex;
onTabChange(tabs[clampedIndex]);
}
scrollPositionRef.current = targetLeft / containerWidth;
scheduleScrollPositionUpdate();
isUserScrolling.current = false;
setIsScrolling(false);
}, SCROLL_END_DELAY);
}, [activeTab, containerWidth, maxIndex, onTabChange, scheduleScrollPositionUpdate, swipeEnabled, tabs]);
}, [applyTransform]);
useLayoutEffect(() => {
if (!swipeEnabled) return;
const container = containerRef.current;
if (!container || containerWidth <= 0) return;
if (isUserScrolling.current) return;
const behavior: ScrollBehavior = hasMounted.current && !prefersReducedMotion ? 'smooth' : 'auto';
scrollToIndex(safeActiveIndex, behavior);
hasMounted.current = true;
const currentPosition = container.scrollLeft / containerWidth;
scrollPositionRef.current = currentPosition;
setScrollPosition(currentPosition);
}, [containerWidth, prefersReducedMotion, safeActiveIndex, scrollToIndex, swipeEnabled]);
measureWidth();
const node = containerRef.current;
if (!node) return undefined;
let observer: ResizeObserver | null = null;
if (typeof ResizeObserver !== 'undefined') {
observer = new ResizeObserver(() => measureWidth());
observer.observe(node);
} else if (typeof window !== 'undefined') {
window.addEventListener('resize', measureWidth);
}
return () => {
observer?.disconnect();
if (typeof window !== 'undefined') {
window.removeEventListener('resize', measureWidth);
}
};
}, [measureWidth]);
const visibleIndexes = useMemo(() => {
const indexes = new Set<number>();
if (!swipeEnabled) {
if (safeActiveIndex >= 0) {
indexes.add(safeActiveIndex);
useLayoutEffect(() => {
displayIndexRef.current = displayIndex;
if (!needsResetRef.current) return;
needsResetRef.current = false;
dragOffsetRef.current = 0;
applyTransform(0, false);
}, [applyTransform, displayIndex]);
useEffect(() => {
return () => {
if (rafRef.current) {
cancelAnimationFrame(rafRef.current);
}
return indexes;
};
}, []);
const resetToIndex = useCallback(
(index: number) => {
displayIndexRef.current = index;
setDisplayIndex(index);
dragOffsetRef.current = 0;
applyTransform(0, false);
},
[applyTransform]
);
const animateToIndex = useCallback(
(index: number) => {
if (index === displayIndexRef.current) {
dragOffsetRef.current = 0;
applyTransform(0, true);
return;
}
const centers = new Set<number>();
centers.add(safeActiveIndex);
if (containerWidth <= 0) {
centers.add(0);
const delta = index - displayIndexRef.current;
const width = widthRef.current || 0;
if (Math.abs(delta) !== 1 || width === 0) {
resetToIndex(index);
return;
}
if (containerWidth > 0 && Number.isFinite(scrollPosition)) {
const base = Math.floor(scrollPosition);
const next = Math.ceil(scrollPosition);
centers.add(base);
centers.add(next);
pendingIndexRef.current = index;
isAnimatingRef.current = true;
dragOffsetRef.current = 0;
applyTransform(delta > 0 ? -width : width, true);
},
[applyTransform, resetToIndex]
);
useLayoutEffect(() => {
if (isDraggingRef.current || isAnimatingRef.current) return;
if (!hasMountedRef.current) {
hasMountedRef.current = true;
resetToIndex(activeIndex);
return;
}
centers.forEach((center) => {
for (let offset = -renderWindow; offset <= renderWindow; offset += 1) {
const index = center + offset;
if (index >= 0 && index < tabs.length) {
indexes.add(index);
if (activeIndex !== displayIndexRef.current) {
const distance = Math.abs(activeIndex - displayIndexRef.current);
if (distance === 1) {
animateToIndex(activeIndex);
} else {
resetToIndex(activeIndex);
}
}
}, [activeIndex, animateToIndex, resetToIndex]);
const scheduleDragUpdate = useCallback(() => {
if (rafRef.current) return;
rafRef.current = requestAnimationFrame(() => {
rafRef.current = 0;
applyTransform(dragOffsetRef.current, false);
});
return indexes;
}, [containerWidth, renderWindow, safeActiveIndex, scrollPosition, swipeEnabled, tabs.length]);
}, [applyTransform]);
const containerStyle: CSSProperties = {
height: !isScrolling && containerHeight ? `${containerHeight}px` : 'auto',
transition: !isScrolling && containerHeight ? 'height 160ms ease-out' : 'none',
const setDraggingClass = useCallback((value: boolean) => {
const node = containerRef.current;
if (!node) return;
node.classList.toggle('swipe-tabs--dragging', value);
}, []);
const startDrag = useCallback(
(x: number, y: number, pointerId: number | null, touchId: number | null) => {
if (swipeDisabled || tabs.length <= 1) return;
if (isAnimatingRef.current) return;
measureWidth();
dragRef.current.pointerId = pointerId;
dragRef.current.touchId = touchId;
dragRef.current.startX = x;
dragRef.current.startY = y;
dragRef.current.startIndex = displayIndexRef.current;
dragRef.current.isActive = true;
dragRef.current.isDragging = false;
dragOffsetRef.current = 0;
},
[measureWidth, swipeDisabled, tabs.length]
);
const updateDrag = useCallback(
(x: number, y: number, preventDefault: () => void, pointerType?: string) => {
const state = dragRef.current;
if (!state.isActive) return;
const dx = x - state.startX;
const dy = y - state.startY;
if (!state.isDragging) {
if (Math.abs(dx) < DRAG_START_DISTANCE && Math.abs(dy) < DRAG_START_DISTANCE) {
return;
}
if (Math.abs(dx) <= Math.abs(dy)) {
return;
}
state.isDragging = true;
isDraggingRef.current = true;
setDraggingClass(true);
}
if (!state.isDragging) return;
const width = widthRef.current || 1;
let offset = dx;
const atStart = state.startIndex <= 0;
const atEnd = state.startIndex >= tabs.length - 1;
if ((atStart && dx > 0) || (atEnd && dx < 0)) {
offset = dx * EDGE_RESISTANCE;
}
offset = Math.max(Math.min(offset, width), -width);
dragOffsetRef.current = offset;
scheduleDragUpdate();
if (pointerType !== 'mouse') {
preventDefault();
}
},
[scheduleDragUpdate, tabs.length]
);
const finishDrag = useCallback(
(cancelled: boolean) => {
const state = dragRef.current;
if (!state.isActive) return;
state.isActive = false;
state.pointerId = null;
state.touchId = null;
const wasDragging = state.isDragging;
state.isDragging = false;
isDraggingRef.current = false;
setDraggingClass(false);
if (!wasDragging) return;
if (rafRef.current) {
cancelAnimationFrame(rafRef.current);
rafRef.current = 0;
}
const width = widthRef.current || 1;
const dx = dragOffsetRef.current;
const thresholdPx = width * threshold;
let targetIndex = state.startIndex;
if (!cancelled && Math.abs(dx) > thresholdPx) {
const direction = dx < 0 ? 1 : -1;
targetIndex = Math.min(Math.max(state.startIndex + direction, 0), tabs.length - 1);
}
dragOffsetRef.current = 0;
if (targetIndex === state.startIndex) {
applyTransform(0, true);
} else {
pendingIndexRef.current = targetIndex;
isAnimatingRef.current = true;
applyTransform(targetIndex > state.startIndex ? -width : width, true);
}
if (targetIndex !== state.startIndex) {
const nextTab = tabs[targetIndex];
if (nextTab !== activeTab) {
onTabChange(nextTab);
}
}
},
[activeTab, applyTransform, onTabChange, setDraggingClass, tabs, threshold]
);
const handlePointerDown = (event: PointerEvent<HTMLDivElement>) => {
if (event.pointerType === 'mouse' && event.button !== 0) return;
if (dragRef.current.isActive) return;
startDrag(event.clientX, event.clientY, event.pointerId, null);
if (containerRef.current?.setPointerCapture) {
try {
containerRef.current.setPointerCapture(event.pointerId);
} catch {
// Ignore pointer capture failures.
}
}
};
if (!swipeEnabled) {
return (
<div
ref={containerRef}
className={`swipe-tabs swipe-tabs--static${className ? ` ${className}` : ''}`}
style={containerStyle}
>
<div className="swipe-tabs-track">
<div className="swipe-tabs-panel" aria-hidden={false}>
<div
className={`swipe-tabs-panel-inner${panelClassName ? ` ${panelClassName}` : ''}`}
ref={(node) => {
if (node) {
panelRefs.current.set(activeTab, node);
} else {
panelRefs.current.delete(activeTab);
const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {
const state = dragRef.current;
if (!state.isActive || state.pointerId !== event.pointerId) return;
const nativeEvent = event.nativeEvent as globalThis.PointerEvent;
const coalesced = typeof nativeEvent.getCoalescedEvents === 'function'
? nativeEvent.getCoalescedEvents()
: [];
const latest = coalesced.length > 0 ? coalesced[coalesced.length - 1] : nativeEvent;
updateDrag(
latest.clientX,
latest.clientY,
() => {
if (event.nativeEvent.cancelable) {
event.preventDefault();
}
}}
>
{renderPanel(activeTab)}
</div>
</div>
</div>
</div>
},
event.pointerType
);
};
const handlePointerUp = (event: PointerEvent<HTMLDivElement>) => {
if (dragRef.current.pointerId !== event.pointerId) return;
finishDrag(false);
if (containerRef.current?.hasPointerCapture?.(event.pointerId)) {
containerRef.current.releasePointerCapture(event.pointerId);
}
};
const handlePointerCancel = (event: PointerEvent<HTMLDivElement>) => {
if (dragRef.current.pointerId !== event.pointerId) return;
finishDrag(true);
if (containerRef.current?.hasPointerCapture?.(event.pointerId)) {
containerRef.current.releasePointerCapture(event.pointerId);
}
};
const handleTouchStart = (event: TouchEvent<HTMLDivElement>) => {
if (dragRef.current.isActive) return;
const touch = event.changedTouches[0];
if (!touch) return;
startDrag(touch.clientX, touch.clientY, null, touch.identifier);
};
const handleTouchMove = (event: TouchEvent<HTMLDivElement>) => {
const state = dragRef.current;
if (!state.isActive || state.touchId === null) return;
const touch = findTouchById(event.changedTouches, state.touchId);
if (!touch) return;
updateDrag(touch.clientX, touch.clientY, () => {
if (event.nativeEvent.cancelable) {
event.preventDefault();
}
});
};
const handleTouchEnd = (event: TouchEvent<HTMLDivElement>) => {
const state = dragRef.current;
if (!state.isActive || state.touchId === null) return;
const touch = findTouchById(event.changedTouches, state.touchId);
if (!touch) return;
finishDrag(false);
};
const handleTouchCancel = (event: TouchEvent<HTMLDivElement>) => {
const state = dragRef.current;
if (!state.isActive || state.touchId === null) return;
const touch = findTouchById(event.changedTouches, state.touchId);
if (!touch) return;
finishDrag(true);
};
const handleTransitionEnd = (event: TransitionEvent<HTMLDivElement>) => {
if (event.propertyName !== 'transform') return;
if (!isAnimatingRef.current) return;
const nextIndex = pendingIndexRef.current;
pendingIndexRef.current = null;
isAnimatingRef.current = false;
if (nextIndex === null) return;
dragOffsetRef.current = 0;
displayIndexRef.current = nextIndex;
needsResetRef.current = true;
setDisplayIndex(nextIndex);
};
const swipeEnabled = !swipeDisabled && tabs.length > 1;
const rootClassName = [
'swipe-tabs',
swipeEnabled ? 'swipe-tabs--snap' : 'swipe-tabs--static',
className
]
.filter(Boolean)
.join(' ');
const panelInnerClasses = ['swipe-tabs-panel-inner', panelClassName].filter(Boolean).join(' ');
const usePointerEvents = typeof window !== 'undefined' && 'PointerEvent' in window;
const renderRadius = Math.max(1, renderWindow);
const prevIndex = renderRadius >= 1 && displayIndex > 0 ? displayIndex - 1 : null;
const nextIndex =
renderRadius >= 1 && displayIndex < tabs.length - 1 ? displayIndex + 1 : null;
const slotTabs = [
prevIndex !== null ? { tab: tabs[prevIndex], index: prevIndex } : null,
{ tab: tabs[displayIndex], index: displayIndex },
nextIndex !== null ? { tab: tabs[nextIndex], index: nextIndex } : null
];
return (
<div
ref={containerRef}
className={`swipe-tabs swipe-tabs--snap${className ? ` ${className}` : ''}${isScrolling ? ' is-scrolling' : ''}`}
style={containerStyle}
onScroll={handleScroll}
className={rootClassName}
onPointerDown={usePointerEvents ? handlePointerDown : undefined}
onPointerMove={usePointerEvents ? handlePointerMove : undefined}
onPointerUp={usePointerEvents ? handlePointerUp : undefined}
onPointerCancel={usePointerEvents ? handlePointerCancel : undefined}
onTouchStart={!usePointerEvents ? handleTouchStart : undefined}
onTouchMove={!usePointerEvents ? handleTouchMove : undefined}
onTouchEnd={!usePointerEvents ? handleTouchEnd : undefined}
onTouchCancel={!usePointerEvents ? handleTouchCancel : undefined}
>
<div className="swipe-tabs-track">
{tabs.map((tab, index) => {
const shouldRender = visibleIndexes.has(index);
<div className="swipe-tabs-track" ref={trackRef} onTransitionEnd={handleTransitionEnd}>
{slotTabs.map((slot, slotIndex) => {
const tab = slot?.tab ?? null;
const key = tab !== null ? String(tab) : `empty-${slotIndex}`;
return (
<div key={tab} className="swipe-tabs-panel" aria-hidden={tab !== activeTab}>
<div
className={`swipe-tabs-panel-inner${panelClassName ? ` ${panelClassName}` : ''}`}
ref={(node) => {
if (node) {
panelRefs.current.set(tab, node);
} else {
panelRefs.current.delete(tab);
}
}}
>
{shouldRender ? renderPanel(tab) : null}
</div>
<section key={key} className="swipe-tabs-panel">
<div className={panelInnerClasses}>
{tab !== null ? renderPanel(tab) : null}
</div>
</section>
);
})}
</div>

2
frontend/src/components/admin/SettingsTab.tsx
View File

@@ -51,7 +51,7 @@ export default function SettingsTab() {
}
return (
<div className="settings-tab-content">
<div className="settings-tab-content content-narrow">
<div className="settings-section-modern">
<div className="section-header">
<h3 className="section-title">{t.settings.authentication}</h3>

2
frontend/src/pages/Notifications.tsx
View File

@@ -105,7 +105,7 @@ export default function Notifications() {
</div>
</div>
<div className="page-content">
<div className="page-content page-content--narrow">
<div className="notifications-toolbar">
<div className="notifications-toggle">
<span className="notifications-toggle-label">{t.notificationsPage.unreadOnly}</span>

2
frontend/src/pages/Settings.tsx
View File

@@ -162,7 +162,7 @@ export default function Settings() {
</div>
</div>
<div className="page-content settings-tab-content">
<div className="page-content page-content--narrow settings-tab-content">
<div className="settings-section">
<h3 className="section-title">{t.settings.preferences}</h3>
<div className="setting-item-modern">

2
frontend/src/pages/admin/Features.tsx
View File

@@ -119,7 +119,7 @@ export default function Features() {
const userEnabled = state?.user ?? true;
return (
<div className="theme-tab-content">
<div className="theme-tab-content content-narrow">
<div className="theme-section">
<div className="section-header">
<h3 className="section-title">{t.featuresPage?.visibility || 'Visibilità'}</h3>

2
frontend/src/pages/admin/Settings.tsx
View File

@@ -70,7 +70,7 @@ export default function Settings() {
</div>
</div>
<div className="page-content">
<div className="page-content page-content--narrow">
<div className="settings-card">
<div className="settings-section">
<h2>{t.settings.authentication}</h2>

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

@@ -1,7 +1,3 @@
.api-keys-root .page-content {
max-width: var(--page-max-width);
}
/* Section Layout - matches theme-section spacing */
.api-keys-section {
margin-bottom: 3rem;

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

@@ -1,7 +1,3 @@
.admin-analytics-root .page-content {
max-width: 1100px;
}
.analytics-cards {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));

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

@@ -1,7 +1,3 @@
.admin-audit-root .page-content {
max-width: 1200px;
}
.audit-filters {
display: flex;
gap: 0.75rem;

9
frontend/src/styles/AdminPanel.css
View File

@@ -1503,7 +1503,9 @@
/* Settings Tab */
.settings-tab-content {
max-width: 800px;
max-width: var(--page-max-width-narrow);
width: 100%;
margin: 0 auto;
}
.settings-section-modern {
@@ -2483,7 +2485,9 @@
display: flex;
flex-direction: column;
gap: 0.75rem;
max-width: 600px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
/* Order Card */
@@ -2672,4 +2676,3 @@
max-width: 100%;
}
}

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

@@ -276,12 +276,26 @@ body {
width: 100%;
}
.page-content--narrow,
.admin-tab-content--narrow,
.content-narrow {
max-width: var(--page-max-width-narrow);
margin: 0 auto;
width: 100%;
}
/* Remove double padding when theme-tab-content is nested inside admin-tab-content */
.admin-tab-content .theme-tab-content {
padding: 0;
max-width: none;
}
.admin-tab-content .content-narrow {
max-width: var(--page-max-width-narrow);
margin: 0 auto;
width: 100%;
}
/* ========== RESPONSIVE DESIGN ========== */
/* Tablet - reduce padding */
@@ -510,12 +524,17 @@ body {
.swipe-tabs-track {
display: flex;
width: 100%;
will-change: transform;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
}
.swipe-tabs-panel {
flex: 0 0 100%;
width: 100%;
min-height: 1px;
background: var(--color-bg-main);
backface-visibility: hidden;
}
.swipe-tabs--static {
@@ -523,19 +542,13 @@ body {
}
.swipe-tabs--static .swipe-tabs-panel {
flex: 0 0 100%;
overflow: hidden;
}
.swipe-tabs--snap {
overflow-x: auto;
overflow-y: hidden;
touch-action: pan-x pan-y;
scroll-snap-type: x mandatory;
overflow: hidden;
touch-action: pan-y;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.swipe-tabs--snap::-webkit-scrollbar {
@@ -543,17 +556,20 @@ body {
}
.swipe-tabs--snap .swipe-tabs-panel {
flex: 0 0 100%;
overflow: hidden;
contain: paint;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.swipe-tabs-panel-inner {
width: 100%;
}
.swipe-tabs--dragging .swipe-tabs-panel-inner {
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.admin-tab-content.swipe-tabs {
display: block;
}

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

@@ -1,7 +1,3 @@
.notifications-root .page-content {
max-width: 900px;
}
.notifications-toolbar {
display: flex;
align-items: center;

2
frontend/src/styles/theme/dimensions.css
View File

@@ -61,6 +61,8 @@
--page-padding-y-mobile: 1.25rem;
--page-max-width: 1200px;
/* Maximum content width */
--page-max-width-narrow: 800px;
/* Narrow content width */
/* Container Widths */
--container-sm: 640px;