nessi/cluedo-hp-webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update layout and scrolling styles for better responsiveness

Browse Source 
Adjusted grid column sizing using "clamp" for improved adaptability to various screen sizes. Minor tweaks to sticky position and maximum height calculation ensure better alignment and consistent scroll behavior.
This commit is contained in:
Sascha Nesterovic
2026-02-07 11:17:54 +01:00
parent cf81c25e6e
commit 3d7d4c01f7
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/App.jsx
View File

@@ -268,7 +268,7 @@ export default function App() {
style={{ style={{
...styles.shell, ...styles.shell,
display: "grid", display: "grid",
gridTemplateColumns: "1fr min(420px, 36vw)", gridTemplateColumns: "1fr clamp(420px, 28vw, 560px)",
gap: 14, gap: 14,
alignItems: "start", alignItems: "start",
}} }}
@@ -348,7 +348,7 @@ export default function App() {
<div <div
style={{ style={{
position: "sticky", position: "sticky",
top: 12, top: 14,
alignSelf: "start", alignSelf: "start",
borderRadius: 22, borderRadius: 22,
border: `1px solid ${stylesTokens.panelBorder}`, border: `1px solid ${stylesTokens.panelBorder}`,
@@ -356,7 +356,7 @@ export default function App() {
boxShadow: "0 22px 90px rgba(0,0,0,0.55)", boxShadow: "0 22px 90px rgba(0,0,0,0.55)",
backdropFilter: "blur(10px)", backdropFilter: "blur(10px)",
padding: 12, padding: 12,
maxHeight: "calc(100dvh - 24px)", maxHeight: "calc(100vh - 28px)",
overflow: "auto", overflow: "auto",
}} }}
> >