Skip to content

Commit ee0765d

Browse files
hmthanhhmthanh
committed
fix mobile
1 parent b5b936e commit ee0765d

9 files changed

Lines changed: 132 additions & 15 deletions

File tree

‎app/ForceGraph.jsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,10 @@ export default function ForceGraph({ data }) {
99
useEffect(() => {
1010
if (!data) return
1111

12-
const width = 928
13-
const height = 600
12+
// Get responsive dimensions
13+
const container = svgRef.current.parentElement
14+
const width = Math.min(container?.offsetWidth || 400, 928)
15+
const height = Math.min(width * 0.65, 600) // Maintain aspect ratio
1416

1517
// Remove old SVG content
1618
d3.select(svgRef.current).selectAll("*").remove()
@@ -96,5 +98,9 @@ export default function ForceGraph({ data }) {
9698
return () => simulation.stop()
9799
}, [data])
98100

99-
return <svg ref={svgRef}></svg>
101+
return (
102+
<div className="w-full overflow-hidden">
103+
<svg ref={svgRef} className="w-full h-auto max-w-full"></svg>
104+
</div>
105+
)
100106
}

‎app/globals.css‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
}
5151

5252
html {
53-
font-size: 13.333px;
53+
font-size: clamp(14px, 2.5vw, 16px);
5454
line-height: 1.2;
5555

5656
@apply text-base;
@@ -113,6 +113,18 @@
113113
.dark:text-slate-200:where(.dark *) {
114114
color: rgba(229, 231, 235);
115115
}
116+
117+
/* Mobile responsive utilities */
118+
.mobile-full-width {
119+
width: 100vw;
120+
margin-left: calc(-50vw + 50%);
121+
}
122+
123+
@media (max-width: 768px) {
124+
.md-hide {
125+
display: none !important;
126+
}
127+
}
116128
}
117129

118130
@layer components {

‎app/layout.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export default async function RootLayout({ children }) {
5858
<html lang="en" suppressHydrationWarning dir="ltr" className={surveyWithCodeFonts.className}>
5959
<head>
6060
<meta charSet="utf-8" />
61-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
61+
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
6262
<link rel="apple-touch-icon" sizes="180x180" href="/favicon.ico"></link>
6363
<meta
6464
name="description"

‎app/page.jsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,14 @@ export default function Page() {
1616

1717
return (
1818
<Body>
19-
<main className="w-full min-w-0 px-2 pt-4">
20-
<div className="grid grid-cols-3 mt-4">
21-
<div className="col-span-2 w-full pl-20 pr-8">
19+
<main className="w-full min-w-0 px-2 md:px-4 pt-4">
20+
<div className="grid grid-cols-1 xl:grid-cols-3 gap-4 mt-4">
21+
<div className="xl:col-span-2 w-full px-2 md:px-4 xl:pl-20 xl:pr-8">
2222
<HomePage />
2323
</div>
24-
<ForceGraph data={data} />
24+
<div className="w-full xl:w-auto">
25+
<ForceGraph data={data} />
26+
</div>
2527
</div>
2628
</main>
2729
</Body>

‎components/body.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Sidebar from "./sidebar"
33

44
export default function Body({ children }) {
55
return (
6-
<div className="mx-auto flex max-w-[90rem]">
6+
<div className="mx-auto flex max-w-[90rem] px-2 sm:px-4">
77
<div className="motion-reduce:transition-none [transition:background-color1.5sease]"></div>
88
{/* <Sidebar/> */}
99
{/* <nav className="nextra-toc order-last max-xl:hidden w-64 shrink-0 print:hidden px-4" aria-label="table of contents">
@@ -79,7 +79,7 @@ export default function Body({ children }) {
7979
</div>
8080
</nav> */}
8181
<div id="reach-skip-nav"></div>
82-
<article className="w-full break-words nextra-content flex min-h-[calc(100vh-var(--nextra-navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
82+
<article className="w-full break-words nextra-content flex min-h-[calc(100vh-var(--nextra-navbar-height))] min-w-0 justify-center pb-8 pr-0 sm:pr-[calc(env(safe-area-inset-right)-1.5rem)]">
8383
{children}
8484
</article>
8585
</div>

‎components/header.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default function Header() {
1616
// </div>
1717
// <nav className="mx-auto flex h-[var(--nextra-navbar-height)] max-w-[90rem] items-center justify-end gap-4 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)]">
1818
<Navbar>
19-
<Link className="flex items-center px-24 hovesr:opacity-75 ltr:mr-auto rtl:ml-auto" href="/">
19+
<Link className="flex items-center px-4 md:px-8 lg:px-24 hover:opacity-75 ltr:mr-auto rtl:ml-auto" href="/">
2020
<LogoIcon className="h-6 w-auto" alt="logo" />
2121
{/* <Image
2222
src="/logo.png"

‎components/navbar.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export default function Navbar({ children }) {
44
return (
55
<div className="nextra-nav-container sticky top-0 z-20 w-full bg-transparent print:hidden">
66
<div className="nextra-navbar-blur absolute -z-1 size-full nextra-border backdrop-blur-md bg-nextra-bg/70"></div>
7-
<nav className="mx-auto flex h-[var(--nextra-navbar-height)] max-w-[90rem] items-center justify-end gap-4 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)]">
7+
<nav className="mx-auto flex h-[var(--nextra-navbar-height)] max-w-[90rem] items-center justify-end gap-2 sm:gap-4 pl-[max(env(safe-area-inset-left),1rem)] pr-[max(env(safe-area-inset-right),1rem)] sm:pl-[max(env(safe-area-inset-left),1.5rem)] sm:pr-[max(env(safe-area-inset-right),1.5rem)]">
88
{children}
99
{/* {themeConfig.logoLink ? (
1010
<NextLink

‎public/responsive-test.html‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Responsive Test</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
padding: 20px;
11+
font-family: Arial, sans-serif;
12+
}
13+
14+
.test-container {
15+
border: 2px solid red;
16+
background: rgba(255, 0, 0, 0.1);
17+
padding: 10px;
18+
margin: 10px 0;
19+
}
20+
21+
.full-width {
22+
width: 100%;
23+
background: rgba(0, 255, 0, 0.1);
24+
border: 1px solid green;
25+
padding: 10px;
26+
}
27+
28+
@media (max-width: 768px) {
29+
.mobile-info {
30+
display: block;
31+
background: yellow;
32+
padding: 10px;
33+
margin: 10px 0;
34+
}
35+
}
36+
37+
@media (min-width: 769px) {
38+
.mobile-info {
39+
display: none;
40+
}
41+
}
42+
</style>
43+
</head>
44+
<body>
45+
<div class="mobile-info">
46+
<strong>Mobile view detected!</strong> Screen width is less than 768px.
47+
</div>
48+
49+
<h1>Responsive Width Test</h1>
50+
51+
<div class="test-container">
52+
<h2>Container Test</h2>
53+
<p>This container should expand to full width on mobile devices.</p>
54+
<div class="full-width">
55+
This div should be 100% width of its container.
56+
</div>
57+
</div>
58+
59+
<div class="test-container" style="max-width: 90rem; margin: 0 auto;">
60+
<h2>Max-Width Container (90rem)</h2>
61+
<p>This matches your site's max-width constraint.</p>
62+
<div class="full-width">
63+
Full width within constrained container.
64+
</div>
65+
</div>
66+
67+
<script>
68+
function updateScreenInfo() {
69+
const width = window.innerWidth;
70+
const height = window.innerHeight;
71+
document.title = `Responsive Test - ${width}x${height}`;
72+
73+
const info = document.createElement('div');
74+
info.style.position = 'fixed';
75+
info.style.top = '0';
76+
info.style.right = '0';
77+
info.style.background = 'rgba(0,0,0,0.8)';
78+
info.style.color = 'white';
79+
info.style.padding = '10px';
80+
info.style.fontSize = '12px';
81+
info.style.zIndex = '9999';
82+
info.innerHTML = `${width} x ${height}px`;
83+
84+
// Remove previous info
85+
const prev = document.querySelector('.screen-info');
86+
if (prev) prev.remove();
87+
88+
info.className = 'screen-info';
89+
document.body.appendChild(info);
90+
}
91+
92+
window.addEventListener('resize', updateScreenInfo);
93+
updateScreenInfo();
94+
</script>
95+
</body>
96+
</html>

‎styles/math/mathstyles.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
.katex {
22
font:
3-
normal 1.21em KaTeX_Main,
3+
normal 1rem KaTeX_Main,
4+
SurveyWithCode,
45
Times New Roman,
56
serif;
6-
7+
78
line-height: 1.2;
89
text-indent: 0;
910
text-rendering: auto;

0 commit comments

Comments
 (0)