Skip to content

Commit 94f0a76

Browse files
committed
Fix desktop sidebar overflow issue
- Add responsive CSS for desktop sidebar states - When sidebar is open: constrain to calc(100vw - 20rem) - When sidebar is hidden: use full viewport width - Use sibling selectors to detect sidebar visibility state - Ensure proper content sizing in both sidebar states
1 parent 2f736d3 commit 94f0a76

File tree

1 file changed

+44
-0
lines changed

1 file changed

+44
-0
lines changed

public/styles.css

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,16 +158,60 @@ pre.relative {
158158
box-sizing: border-box;
159159
}
160160

161+
/* Desktop: when sidebar is open (default), account for sidebar width */
162+
@media (min-width: 768px) {
163+
#snippets-container {
164+
max-width: calc(100vw - 20rem); /* 20rem = w-80 (sidebar width) */
165+
width: calc(100vw - 20rem);
166+
}
167+
}
168+
169+
/* Desktop: when sidebar is hidden, use full viewport width */
170+
@media (min-width: 768px) {
171+
#sidebar.sidebar-hidden ~ main #snippets-container {
172+
max-width: 100vw;
173+
width: 100vw;
174+
}
175+
}
176+
161177
#snippets-container > div {
162178
max-width: calc(100vw - 2rem); /* Account for container padding */
163179
box-sizing: border-box;
164180
}
165181

182+
/* Desktop: adjust snippet max-width when sidebar is open */
183+
@media (min-width: 768px) {
184+
#snippets-container > div {
185+
max-width: calc(100vw - 22rem); /* 20rem sidebar + 2rem padding */
186+
}
187+
}
188+
189+
/* Desktop: when sidebar is hidden, use full width for snippets */
190+
@media (min-width: 768px) {
191+
#sidebar.sidebar-hidden ~ main #snippets-container > div {
192+
max-width: calc(100vw - 2rem);
193+
}
194+
}
195+
166196
#snippets-container pre {
167197
max-width: calc(100vw - 4rem); /* Account for container + snippet padding */
168198
box-sizing: border-box;
169199
}
170200

201+
/* Desktop: adjust code block max-width when sidebar is open */
202+
@media (min-width: 768px) {
203+
#snippets-container pre {
204+
max-width: calc(100vw - 24rem); /* 20rem sidebar + 4rem padding */
205+
}
206+
}
207+
208+
/* Desktop: when sidebar is hidden, use full width for code blocks */
209+
@media (min-width: 768px) {
210+
#sidebar.sidebar-hidden ~ main #snippets-container pre {
211+
max-width: calc(100vw - 4rem);
212+
}
213+
}
214+
171215
/* Ensure code blocks don't overflow on mobile */
172216
#snippets-container pre code {
173217
word-wrap: break-word;

0 commit comments

Comments
 (0)