leoalho/paste
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: leoalho:51227631e67a2ed22669e97abfec6db297ec3201
Branches Tags
leoalho:main
..
compare: leoalho:4d896adcdb6e7fc8ca99619a7f85a556fe8428b1
Branches Tags
leoalho:main

2 commits
51227631e6 ... 4d896adcdb

Author SHA1 Message Date
Leo
4d896adcdb Fix bottom nav bar hidden on mobile 
Use 100dvh (dynamic viewport height) so the layout accounts for mobile
browser chrome (address bar, navigation bar), with 100vh as fallback.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-03-02 20:42:44 +02:00
Leo
735a8c1438 Improve mobile responsiveness 
Add viewport meta tag to prevent mobile browsers from scaling down the
page, and add responsive CSS for screens ≤600px to keep the UI readable.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-03-02 16:49:23 +02:00
1 changed files with 30 additions and 0 deletions
Show stats Expand all files Collapse all files

30
index.html
View file

@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Paste</title> <title>Paste</title>
<style> <style>
* { * {
@ -36,6 +37,7 @@ body {
color: var(--text-primary); color: var(--text-primary);
font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
height: 100vh; height: 100vh;
height: 100dvh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
@ -119,6 +121,34 @@ body {
.hidden { .hidden {
display: none !important; display: none !important;
} }
@media (max-width: 600px) {
#line-numbers {
font-size: 12px;
min-width: 36px;
padding: 10px 6px;
}
#plaintext {
font-size: 12px;
padding: 10px;
}
#nav {
padding: 8px;
gap: 8px;
}
.btn {
padding: 8px 12px;
font-size: 13px;
}
#url-output {
min-width: 0;
width: 100%;
font-size: 12px;
}
#status {
margin-left: 0;
width: 100%;
}
}
</style> </style>
<script src="lzma.js"></script> <script src="lzma.js"></script>
</head> </head>