Skip to content

Commit 88fa5a2

Browse files
mohamedhadriBekahHWadiati98
authored
fix: Improve mobile responsiveness and code block button visibility (#294)
* fix: Improve mobile responsiveness and code block button visibility * refactor: Remove article padding from dark theme styles * style: Enhance mobile layout by removing padding from containers and articles * feat: add mobile word wrap functionality and improve image responsiveness --------- Co-authored-by: BekahHW <34313413+BekahHW@users.noreply.github.com> Co-authored-by: Ayu Adiati <45172775+adiati98@users.noreply.github.com>
1 parent b04160d commit 88fa5a2

3 files changed

Lines changed: 398 additions & 0 deletions

File tree

‎docusaurus.config.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,11 @@ const config = {
2828
onBrokenLinks: "throw",
2929
onBrokenMarkdownLinks: "warn",
3030

31+
// Client modules - scripts that run on the client side
32+
clientModules: [
33+
require.resolve('./src/js/mobileWordWrap.js'),
34+
],
35+
3136
// Even if you don't use internationalization, you can use this field to set
3237
// useful metadata like html lang. For example, if your site is Chinese, you
3338
// may want to replace "en" with "zh-Hans".
@@ -60,6 +65,12 @@ const config = {
6065
({
6166
// Replace with your project's social card
6267
image: "img/docusaurus-social-card.jpg",
68+
metadata: [
69+
{
70+
name: "viewport",
71+
content: "width=device-width, initial-scale=1.0, maximum-scale=5.0",
72+
},
73+
],
6374
navbar: {
6475
title: "Open Source Education Path",
6576
logo: {

‎src/css/custom.css‎

Lines changed: 304 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,4 +49,308 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
4949
background-size: contain;
5050
position: absolute;
5151
background-repeat: no-repeat;
52+
}
53+
54+
/* ==========================================
55+
MOBILE RESPONSIVE IMPROVEMENTS
56+
========================================== */
57+
58+
/* Fix code block copy buttons for mobile */
59+
/* Make copy buttons always visible on mobile devices */
60+
@media (max-width: 996px) {
61+
.clean-btn {
62+
opacity: 1 !important;
63+
visibility: visible !important;
64+
}
65+
66+
/* Ensure the button group is always visible */
67+
.code-block-with-language .button-group {
68+
opacity: 1 !important;
69+
visibility: visible !important;
70+
}
71+
72+
/* Make sure copy button is always visible */
73+
.clean-btn[aria-label*="Copy"] {
74+
opacity: 1 !important;
75+
visibility: visible !important;
76+
}
77+
}
78+
79+
/* Alternative approach - target Docusaurus specific classes */
80+
@media (max-width: 996px) {
81+
/* Target the copy button in code blocks */
82+
.theme-code-block .clean-btn {
83+
opacity: 1 !important;
84+
visibility: visible !important;
85+
}
86+
87+
/* Target button groups in code blocks */
88+
.theme-code-block .button-group {
89+
opacity: 1 !important;
90+
visibility: visible !important;
91+
}
92+
93+
/* Ensure code block buttons are always visible on mobile */
94+
.prism-code .clean-btn {
95+
opacity: 1 !important;
96+
visibility: visible !important;
97+
}
98+
}
99+
100+
/* General Mobile Breakpoints */
101+
@media (max-width: 996px) {
102+
/* Improve overall spacing on mobile */
103+
.main-wrapper {
104+
padding: 0 !important;
105+
}
106+
107+
/* Remove ALL padding from containers */
108+
.container {
109+
padding-left: 0 !important;
110+
padding-right: 0 !important;
111+
}
112+
113+
/* Remove all horizontal padding from article */
114+
article {
115+
padding-left: 0 !important;
116+
padding-right: 0 !important;
117+
}
118+
119+
/* Add ONLY minimal padding to markdown content - force override */
120+
.theme-doc-markdown.markdown {
121+
padding-left: 0.75rem !important;
122+
padding-right: 0.75rem !important;
123+
}
124+
125+
/* Remove padding from ALL doc containers */
126+
div[class*="docItemContainer"],
127+
div[class*="docMainContainer"],
128+
div[class*="docItemCol"] {
129+
padding-left: 0 !important;
130+
padding-right: 0 !important;
131+
}
132+
133+
/* Target the main doc wrapper */
134+
main[class*="docMainContainer"] {
135+
padding: 0 !important;
136+
}
137+
138+
/* Remove row padding */
139+
.row {
140+
margin-left: 0 !important;
141+
margin-right: 0 !important;
142+
}
143+
}
144+
145+
/* Image Responsiveness */
146+
@media (max-width: 996px) {
147+
/* Make content images responsive */
148+
.markdown img,
149+
.theme-doc-markdown img {
150+
max-width: 100%;
151+
height: auto;
152+
display: block;
153+
}
154+
155+
/* Responsive image containers */
156+
.markdown > p > img {
157+
width: 100%;
158+
height: auto;
159+
object-fit: contain;
160+
}
161+
}
162+
163+
/* Footer logo sizing on mobile – prevent oversized logo */
164+
@media (max-width: 996px) {
165+
.footer .footer__logo img,
166+
.footer .footer__logo {
167+
max-width: 72px;
168+
width: 72px;
169+
height: auto;
170+
}
171+
}
172+
173+
/* Navigation Menu Improvements for Mobile */
174+
@media (max-width: 996px) {
175+
/* Improve mobile menu button visibility */
176+
.navbar__toggle {
177+
display: flex;
178+
align-items: center;
179+
justify-content: center;
180+
}
181+
182+
/* Better mobile menu styling */
183+
.navbar-sidebar {
184+
width: 80vw;
185+
max-width: 350px;
186+
}
187+
188+
/* Improve menu item spacing */
189+
.navbar-sidebar .menu__list-item {
190+
padding: 0.5rem 0;
191+
}
192+
193+
/* Better touch targets for mobile menu */
194+
.navbar-sidebar .menu__link {
195+
padding: 0.75rem 1rem;
196+
font-size: 1rem;
197+
min-height: 44px; /* Accessibility - minimum touch target */
198+
}
199+
}
200+
201+
/* Pagination (Prev/Next) – prevent cut off on mobile */
202+
@media (max-width: 996px) {
203+
/* Add small horizontal padding to the whole block to keep cards inside viewport */
204+
.pagination-nav {
205+
padding-left: 0.75rem;
206+
padding-right: 0.75rem;
207+
}
208+
209+
/* Remove extra margins that cause overflow when each item is 50% width */
210+
.pagination-nav__link {
211+
margin: 0;
212+
}
213+
214+
/* Ensure box sizing doesn't overflow and keep a tiny gap */
215+
.pagination-nav__item {
216+
box-sizing: border-box;
217+
padding-left: 0.25rem;
218+
padding-right: 0.25rem;
219+
}
220+
}
221+
222+
/* Table Responsiveness */
223+
@media (max-width: 996px) {
224+
/* Make tables scrollable horizontally on mobile */
225+
.markdown table {
226+
display: block;
227+
width: 100%;
228+
overflow-x: auto;
229+
-webkit-overflow-scrolling: touch;
230+
}
231+
232+
/* Ensure table cells have adequate padding */
233+
.markdown table td,
234+
.markdown table th {
235+
min-width: 100px;
236+
padding: 0.5rem;
237+
}
238+
}
239+
240+
/* Typography Improvements for Mobile */
241+
@media (max-width: 996px) {
242+
/* Adjust heading sizes for mobile */
243+
h1 {
244+
font-size: 1.75rem !important;
245+
}
246+
247+
h2 {
248+
font-size: 1.5rem !important;
249+
}
250+
251+
h3 {
252+
font-size: 1.25rem !important;
253+
}
254+
255+
/* Better line height for readability */
256+
.markdown p {
257+
line-height: 1.7;
258+
}
259+
260+
/* Prevent text overflow */
261+
.markdown {
262+
word-wrap: break-word;
263+
overflow-wrap: break-word;
264+
}
265+
}
266+
267+
/* Sidebar Improvements for Mobile */
268+
@media (max-width: 996px) {
269+
/* Ensure sidebar is fully usable on mobile */
270+
.theme-doc-sidebar-container {
271+
width: 100%;
272+
}
273+
274+
/* Better sidebar menu items */
275+
.theme-doc-sidebar-menu {
276+
padding: 1rem;
277+
}
278+
279+
/* Improve sidebar link spacing */
280+
.menu__link {
281+
padding: 0.5rem 0.75rem;
282+
font-size: 0.95rem;
283+
}
284+
}
285+
286+
/* Button and Interactive Elements */
287+
@media (max-width: 996px) {
288+
/* Ensure all buttons have adequate touch targets */
289+
.button,
290+
.clean-btn,
291+
a.button {
292+
min-height: 40px;
293+
min-width: 40px;
294+
}
295+
296+
/* Add flex display to clean-btn for better layout */
297+
.clean-btn {
298+
display: flex;
299+
align-items: center;
300+
justify-content: center;
301+
}
302+
303+
/* Better button spacing */
304+
.button:not(:last-child) {
305+
margin-bottom: 0.5rem;
306+
}
307+
}
308+
309+
/* Admonitions (Tips, Notes, Warnings) on Mobile */
310+
@media (max-width: 996px) {
311+
.admonition {
312+
margin: 1rem 0;
313+
padding: 1rem;
314+
}
315+
316+
.admonition-heading h5 {
317+
font-size: 1rem;
318+
}
319+
}
320+
321+
/* Footer Improvements for Mobile */
322+
@media (max-width: 996px) {
323+
.footer {
324+
padding: 2rem 1rem;
325+
}
326+
327+
.footer__links {
328+
padding-left: 0;
329+
}
330+
331+
.footer__col {
332+
margin-bottom: 1.5rem;
333+
}
334+
}
335+
336+
/* Prevent horizontal scroll */
337+
@media (max-width: 996px) {
338+
body {
339+
overflow-x: hidden;
340+
}
341+
342+
/* Prevent content from overflowing */
343+
.main-wrapper {
344+
overflow-x: hidden;
345+
}
346+
347+
/* Ensure all containers respect viewport */
348+
* {
349+
max-width: 100%;
350+
}
351+
352+
/* Allow specific elements to exceed if needed */
353+
html, body, .main-wrapper, .container {
354+
max-width: none;
355+
}
52356
}

0 commit comments

Comments
 (0)