Skip to content

Commit 5a747fc

Browse files
committed
Fix mobile snippet overflow
- Add overflow-x-hidden and max-w-full to snippets-container - Add CSS rules to constrain snippet boxes and code blocks to viewport width - Enable word wrapping for long code lines to prevent horizontal overflow - Ensure proper box-sizing for mobile responsiveness
1 parent 7383e2a commit 5a747fc

File tree

2 files changed

+20
-1
lines changed

2 files changed

+20
-1
lines changed

public/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ <h1 class="text-2xl font-bold truncate">massCode-Web</h1>
5959
<div id="search-info-bar" class="hidden px-4 py-2 bg-blue-50 border-b border-blue-200 text-blue-800 text-sm dark:bg-blue-900 dark:border-blue-700 dark:text-blue-200">
6060
<!-- Search results info will be displayed here -->
6161
</div>
62-
<div id="snippets-container" class="flex-1 p-4 overflow-y-auto">
62+
<div id="snippets-container" class="flex-1 p-4 overflow-y-auto overflow-x-hidden max-w-full">
6363
<!-- Snippets will be rendered here -->
6464
</div>
6565
</main>

public/styles.css

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,4 +149,23 @@ pre.relative {
149149
.dark .search-highlight {
150150
background-color: #451a03;
151151
box-shadow: 0 0 0 1px #d97706;
152+
}
153+
154+
/* Mobile responsive snippet styles */
155+
#snippets-container > div {
156+
max-width: 100%;
157+
box-sizing: border-box;
158+
}
159+
160+
#snippets-container pre {
161+
max-width: 100%;
162+
box-sizing: border-box;
163+
}
164+
165+
/* Ensure code blocks don't overflow on mobile */
166+
#snippets-container pre code {
167+
word-wrap: break-word;
168+
white-space: pre-wrap;
169+
max-width: 100%;
170+
overflow-wrap: break-word;
152171
}

0 commit comments

Comments
 (0)