Skip to content

Commit cec1303

Browse files
suryansh00001suryansh00001
authored
Fix #543: Improve documentation site responsiveness on mobile devices
1 parent fe2f98d commit cec1303

File tree

2 files changed

+352
-1
lines changed

2 files changed

+352
-1
lines changed

‎docs/backend/backend_python/api.md‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,23 @@
11
<!-- # API Reference -->
22

3-
<swagger-ui src="openapi.json"/>
3+
<div class="api-500-wrapper">
4+
<swagger-ui src="openapi.json"/>
5+
</div>
6+
7+
<!-- Add a small script to mark the page so we can scope header/footer CSS only for this route -->
8+
<script>
9+
(function () {
10+
function markApiPage() {
11+
try {
12+
document.body.classList.add('api-fixed-500');
13+
} catch (e) {
14+
/* ignore */
15+
}
16+
}
17+
if (document.readyState === 'loading') {
18+
document.addEventListener('DOMContentLoaded', markApiPage);
19+
} else {
20+
markApiPage();
21+
}
22+
})();
23+
</script>

‎docs/stylesheets/extra.css‎

Lines changed: 331 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,334 @@
2020
margin-left: 8px !important;
2121
}
2222

23+
/* Responsive tweaks: ensure header, images, tables and code blocks behave well on small screens */
24+
25+
/* Make images scale down to container */
26+
.md-typeset img,
27+
.md-content img {
28+
max-width: 100%;
29+
height: auto;
30+
}
31+
32+
/* Tables should be scrollable on small screens */
33+
.md-typeset table {
34+
width: 100%;
35+
display: block;
36+
overflow-x: auto;
37+
}
38+
39+
/* Code blocks should wrap/scroll gracefully */
40+
.md-typeset pre {
41+
white-space: pre-wrap; /* allow wrapping */
42+
word-break: break-word;
43+
overflow-x: auto;
44+
}
45+
46+
/* General container/content spacing adjustments for smaller screens */
47+
.md-main, .md-content {
48+
padding-left: 1rem;
49+
padding-right: 1rem;
50+
}
51+
52+
/* Tablet and small laptop */
53+
@media (max-width: 768px) {
54+
.md-header__button.md-logo img {
55+
width: 28px;
56+
height: auto;
57+
}
58+
59+
.md-header__button.md-logo {
60+
padding-right: 6px;
61+
margin-right: 6px;
62+
}
63+
64+
.md-header__title {
65+
margin-left: 6px !important;
66+
font-size: 1rem;
67+
white-space: normal;
68+
}
69+
70+
/* Allow header inner area to wrap so items don't overflow */
71+
.md-header__inner {
72+
flex-wrap: wrap;
73+
align-items: center;
74+
gap: 6px;
75+
}
76+
77+
/* Slightly reduce padding for main content */
78+
.md-main {
79+
padding: 0.5rem 0.75rem;
80+
}
81+
82+
/* Make navigation easier to tap */
83+
.md-nav {
84+
margin-top: 8px;
85+
}
86+
}
87+
88+
/* Small phones */
89+
@media (max-width: 480px) {
90+
.md-header__button.md-logo img {
91+
width: 24px;
92+
}
93+
94+
.md-header__title {
95+
font-size: 0.95rem;
96+
}
97+
98+
.md-header__title a {
99+
font-size: 0.95rem;
100+
}
101+
102+
/* Ensure actions align to the right and don't push content */
103+
.md-header__actions {
104+
margin-left: auto;
105+
}
106+
107+
.md-nav {
108+
font-size: 0.95rem;
109+
}
110+
111+
.md-content {
112+
padding: 0.75rem;
113+
}
114+
115+
.md-typeset .admonition-title {
116+
font-size: 0.95rem;
117+
}
118+
}
119+
120+
/* Specific fix for the home page's 4-column inline HTML layout in docs/index.md.
121+
The page uses inline styles (display:flex and width:25% on children). These rules
122+
add wrapping and force child blocks to become full-width on narrow screens.
123+
*/
124+
.md-typeset > div[style*="display:flex"] {
125+
display: flex !important;
126+
flex-wrap: wrap !important;
127+
justify-content: center !important;
128+
gap: 0.5rem;
129+
}
130+
131+
.md-typeset > div[style*="display:flex"] > div {
132+
width: 25% !important;
133+
box-sizing: border-box !important;
134+
padding-left: 0.5rem !important;
135+
padding-right: 0.5rem !important;
136+
}
137+
138+
@media (max-width: 900px) {
139+
/* On tablets and small laptops, use two columns */
140+
.md-typeset > div[style*="display:flex"] > div {
141+
width: 50% !important;
142+
}
143+
}
144+
145+
@media (max-width: 540px) {
146+
/* On phones, make each section full-width (stack vertically) */
147+
.md-typeset > div[style*="display:flex"] > div {
148+
width: 100% !important;
149+
padding-left: 0 !important;
150+
padding-right: 0 !important;
151+
}
152+
.md-typeset > div[style*="display:flex"] h2 {
153+
text-align: left;
154+
margin-left: 0.25rem;
155+
}
156+
}
157+
158+
/* Swagger UI / OpenAPI responsive fixes */
159+
/* The API page includes a <swagger-ui> web component whose internal layout
160+
can overflow on small screens. These rules make summaries wrap and ensure
161+
panels and code samples are scrollable instead of overlapping. */
162+
.swagger-ui,
163+
.swagger-ui * {
164+
box-sizing: border-box;
165+
}
166+
167+
.swagger-ui .topbar {
168+
flex-wrap: wrap;
169+
}
170+
171+
.swagger-ui .info .title,
172+
.swagger-ui .info .description {
173+
word-break: break-word;
174+
}
175+
176+
.swagger-ui .opblock-summary {
177+
display: flex;
178+
flex-wrap: wrap;
179+
gap: 0.25rem;
180+
}
181+
182+
.swagger-ui .opblock .opblock-summary-method,
183+
.swagger-ui .opblock .opblock-summary-path {
184+
white-space: normal;
185+
}
186+
187+
/* Make operations and parameters area scroll horizontally instead of overlapping */
188+
.swagger-ui .opblock-body,
189+
.swagger-ui .parameters {
190+
overflow-x: auto;
191+
}
192+
193+
/* Ensure code samples are responsive */
194+
.swagger-ui pre, .swagger-ui code {
195+
white-space: pre-wrap;
196+
word-break: break-word;
197+
}
198+
199+
/* Smaller devices: stack operation summary elements and increase spacing */
200+
@media (max-width: 720px) {
201+
.swagger-ui .opblock-summary {
202+
flex-direction: column;
203+
align-items: stretch;
204+
}
205+
.swagger-ui .opblock .opblock-summary-path {
206+
font-size: 0.95rem;
207+
}
208+
}
209+
210+
/* Redoc-specific fixes in case the component renders Redoc */
211+
.redoc-wrap, .redoc {
212+
max-width: 100%;
213+
}
214+
.redoc .menu-content, .redoc .operations-wrapper {
215+
overflow-x: auto;
216+
}
217+
218+
/* Scoped: Force a 500px "fixed" layout only for the Python backend API page.
219+
The wrapper `.api-500-wrapper` is added to `docs/backend/backend_python/api.md`.
220+
Only this page will use a 500px min-width and allow horizontal scrolling on
221+
very small viewports so other pages remain normal.
222+
*/
223+
@media (max-width: 500px) {
224+
.api-500-wrapper {
225+
min-width: 500px !important;
226+
overflow-x: auto !important;
227+
-webkit-overflow-scrolling: touch;
228+
box-sizing: border-box;
229+
}
230+
231+
/* Ensure Swagger/Redoc components inside the wrapper respect the min-width */
232+
.api-500-wrapper .swagger-ui,
233+
.api-500-wrapper .redoc,
234+
.api-500-wrapper .redoc-wrap {
235+
min-width: 500px !important;
236+
}
237+
238+
/* Keep code blocks and tables inside the API wrapper readable; they will scroll inside the pane */
239+
.api-500-wrapper table,
240+
.api-500-wrapper pre,
241+
.api-500-wrapper code {
242+
min-width: 500px;
243+
overflow-x: auto;
244+
}
245+
}
246+
247+
/* When API page is active, also constrain header/footer to the same 500px
248+
so the entire visible page appears as a 500px layout (header/footer included).
249+
This is only applied when the body has the `.api-fixed-500` class which is
250+
added by a small inline script on the API page. */
251+
@media (max-width: 500px) {
252+
body.api-fixed-500 {
253+
overflow-x: auto;
254+
-webkit-overflow-scrolling: touch;
255+
}
256+
257+
/* Constrain header, main and footer to the same 500px pane so they appear
258+
consistent when the API page forces a fixed layout on small viewports. */
259+
body.api-fixed-500 .md-header,
260+
body.api-fixed-500 header,
261+
body.api-fixed-500 .md-main,
262+
body.api-fixed-500 .md-footer,
263+
body.api-fixed-500 footer {
264+
width: 500px !important;
265+
min-width: 500px !important;
266+
margin: 0 auto !important;
267+
box-sizing: border-box !important;
268+
overflow: visible !important;
269+
}
270+
271+
/* Ensure inner containers within header/footer stretch to the 500px width */
272+
body.api-fixed-500 .md-header__inner,
273+
body.api-fixed-500 .md-footer__inner,
274+
body.api-fixed-500 .md-footer-nav,
275+
body.api-fixed-500 .md-footer__copyright {
276+
width: 100% !important;
277+
box-sizing: border-box !important;
278+
}
279+
280+
/* Adjust header inner alignment so actions remain visible within the 500px pane */
281+
body.api-fixed-500 .md-header__inner {
282+
justify-content: space-between;
283+
}
284+
285+
/* Center the wrapper itself */
286+
.api-500-wrapper {
287+
margin: 0 auto;
288+
}
289+
}
290+
291+
@media (max-width: 600px) {
292+
/* Center the social container itself */
293+
.md-social,
294+
.md-footer .md-social {
295+
text-align: center !important;
296+
display: block !important;
297+
}
298+
299+
/* Center copyright text */
300+
.md-copyright,
301+
.md-footer .md-footer__copyright {
302+
text-align: center !important;
303+
display: block !important;
304+
}
305+
306+
/* Keep social links inline and add small horizontal spacing */
307+
.md-social a,
308+
.md-footer .md-social a {
309+
display: inline-block !important;
310+
margin: 0 0.25rem !important;
311+
vertical-align: middle !important;
312+
}
313+
}
314+
315+
\
316+
.md-footer-meta__inner.md-grid {
317+
display: flex !important;
318+
flex-direction: column !important;
319+
align-items: center !important;
320+
justify-content: center !important;
321+
gap: 0.25rem !important;
322+
text-align: center !important;
323+
}
324+
325+
.md-footer-meta__inner.md-grid .md-social {
326+
display: block !important;
327+
}
328+
329+
.md-footer-meta__inner.md-grid .md-social a {
330+
display: inline-block !important;
331+
margin: 0 0.25rem !important;
332+
}
333+
334+
/* Center only the copyright line without affecting social icons */
335+
.md-footer .md-copyright,
336+
.md-footer-meta__inner.md-grid .md-copyright {
337+
display: block !important;
338+
width: 100% !important;
339+
text-align: center !important;
340+
margin: 0.25rem 0 !important;
341+
}
342+
343+
.md-footer .md-social,
344+
.md-footer-meta__inner.md-grid .md-social {
345+
display: inline-block !important;
346+
vertical-align: middle !important;
347+
}
348+
349+
350+
351+
352+
353+

0 commit comments

Comments
 (0)