Merge pull request #42 from recursivezero/feature/RTY-260041

Mobile Responsiveness improvement

Author: recursivezero

app/routes.py

@@ -112,12 +112,14 @@ async def create_short_url(
 
     if not original_url or not is_valid_url(original_url):  # validate the URL
         session["error"] = "Please enter a valid URL."
+        session["original_url"] = original_url  # preserve user input
         return RedirectResponse("/", status_code=status.HTTP_303_SEE_OTHER)
 
     if not authorize_url(
         original_url
     ):  # authorize the URL based on whitelist/blacklist
         session["error"] = "This domain is not allowed."
+        session["original_url"] = original_url  # preserve user input
         return RedirectResponse("/", status_code=status.HTTP_303_SEE_OTHER)
 
     short_code: Optional[str] = get_short_from_cache(original_url)

app/static/css/tiny.css

@@ -1,3 +1,9 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
 :root {
   --bg: #0a0a0c;
   --glass: rgba(255, 255, 255, 0.03);
@@ -14,6 +20,7 @@ body {
   margin: 0;
   overflow-x: hidden;
   background-image: radial-gradient(circle at 50% -20%, #1e1e2e 0%, transparent 50%);
+
 }
 
 
@@ -30,12 +37,13 @@ body.light-theme {
 }
 
 .main-layout {
-  max-width: 940px;
+  max-width: 870px;
   margin: 0 auto;
   padding: 6rem 1rem 4rem;
   display: flex;
   flex-direction: column;
   gap: 2rem;
+  flex: 1;
 }
 
 .page {
@@ -53,7 +61,6 @@ body.light-theme {
   justify-content: space-between;
   padding: 0 10px;
   box-sizing: border-box;
-
   background: var(--glass);
   border-bottom: 1px solid var(--glass-border);
   z-index: 1000;
@@ -93,7 +100,9 @@ body.light-theme .app-header {
 .header-nav {
   display: flex;
   gap: 26px;
-  margin: 0 auto;
+  flex-wrap: wrap;
+  white-space: nowrap;
+  flex-shrink: 1;
 }
 
 .nav-link,
@@ -166,10 +175,56 @@ body.dark-theme .app-header {
   color: var(--accent);
 }
 
+/* hamburger hidden on desktop */
+
+.hamburger {
+  display: none;
+  font-size: 22px;
+  background: transparent;
+  border: none;
+  color: var(--text-primary);
+  cursor: pointer;
+}
+
+
 @media (max-width: 600px) {
-  .logo {
-    font-size: 1.2rem;
+  .app-logo {
+    transform: scale(0.9);
   }
+
+  .app-name {
+    font-size: 1.1rem;
+  }
+
+
+}
+
+
+@media (max-width: 700px) {
+
+  .hamburger {
+    display: block;
+  }
+
+  .header-nav {
+    display: none;
+    position: fixed;
+    top: 55px;
+    left: 0;
+    right: 0;
+    width: 100%;
+    flex-direction: column;
+    background: var(--bg);
+    padding: 20px;
+    display: none;
+    gap: 16px;
+    border-bottom: 1px solid var(--glass-border);
+  }
+
+  .header-nav.open {
+    display: flex;
+  }
+
 }
 
 /* Hero input */
@@ -266,6 +321,10 @@ body.dark-theme .app-header {
   gap: 1.5rem;
 }
 
+.short-url {
+  max-width: 100%;
+}
+
 .qr-image {
   width: 80px;
   height: 80px;
@@ -286,6 +345,8 @@ body.dark-theme .app-header {
   font-weight: 700;
   color: var(--text-primary);
   text-decoration: none;
+  word-break: break-all;
+  overflow-wrap: anywhere;
 }
 
 .result-actions {
@@ -380,6 +441,23 @@ body.dark-theme .app-header {
   font-weight: 700;
 }
 
+@media (max-width: 768px) {
+
+  .input-wrapper {
+    flex-direction: column;
+  }
+
+  .btn-primary {
+    width: 100%;
+  }
+
+  .scroll-container {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+
+}
+
 /* ===============================
    MODERN GLASS RECENT TABLE
 ================================= */
@@ -394,6 +472,7 @@ body.dark-theme .app-header {
 .recent-table-wrapper {
   width: 100%;
   overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 /* ===============================
@@ -406,7 +485,7 @@ body.dark-theme .app-header {
   border-radius: 12px;
   overflow: hidden;
   table-layout: fixed;
-  min-width: 800px;
+  min-width: 720px;
 }
 
 .recent-table thead {
@@ -583,7 +662,7 @@ footer.big-footer {
   background: var(--bg);
   border-top: 1px solid var(--glass-border);
   padding: 4rem 1rem 2rem;
-  margin-top: 4rem;
+  margin-top: auto;
 }
 
 .footer-grid {

app/templates/footer.html

@@ -7,7 +7,6 @@ <h3>🔗 RZRO.link</h3>
     <div class="footer-col">
       <h4>Product</h4>
       <ul>
-        <li><a href="cache/list">CACHE URLs</a></li>
         <li><a href="#">API Documentation</a></li>
         <li><a href="#">Custom Branded Links</a></li>
         <li><a href="#">QR Code Engine</a></li>
@@ -16,7 +15,6 @@ <h4>Product</h4>
     <div class="footer-col">
       <h4>Support</h4>
       <ul>
-        <li><a href="/docs"> UI docs</a></li>
         <li><a href="#">Help Center</a></li>
         <li><a href="#">System Status</a></li>
         <li><a href="#">Contact Us</a></li>

app/templates/header.html

@@ -12,6 +12,7 @@
   </nav>
   <div class="header-right">
     <button class="theme-toggle" onclick="toggleTheme()">🌓</button>
+    <button class="hamburger">☰</button>
   </div>
 </header>
 <script>
@@ -25,4 +26,12 @@
       link.classList.remove("active");
     }
   });
+
+  const hamburger = document.querySelector(".hamburger");
+  const nav = document.querySelector(".header-nav");
+
+  hamburger.addEventListener("click", () => {
+    nav.classList.toggle("open");
+  });
+
 </script>

app/templates/layout.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <title>{% block title %}tiny URL{% endblock %}</title>
+  <title>{% block title %}rzro.link{% endblock %}</title>
   <!-- OpenGraph Meta Tags -->
   <meta property="og:title" content="rzro.link | Smart URL Shortener">
   <meta property="og:description"