From d0a6271305a17b45dad65898f0f53f51f54b3134 Mon Sep 17 00:00:00 2001 From: Ravindrayadav04 Date: Thu, 19 Mar 2026 19:12:47 +0530 Subject: [PATCH 1/3] [RTY-260045]: Fix UI responsiveness, spacing issues, and sticky footer layout --- app/static/css/tiny.css | 267 +++++++++++++++++++++----------------- app/templates/index.html | 92 +++++++------ app/templates/layout.html | 21 +-- 3 files changed, 206 insertions(+), 174 deletions(-) diff --git a/app/static/css/tiny.css b/app/static/css/tiny.css index d940fba..82d82b4 100644 --- a/app/static/css/tiny.css +++ b/app/static/css/tiny.css @@ -39,27 +39,20 @@ body.light-theme { } .container { - display: grid; - grid-template-rows: auto 1fr auto; - min-height: 100vh; -} - -.main-layout { - max-width: 870px; - margin: 0 auto; - padding: 6rem 1rem 4rem; display: flex; flex-direction: column; - gap: 2rem; - flex: 1; + min-height: 100vh; } .main-layout { + max-width: 870px; width: 90%; - margin: 2rem auto; + margin: 0 auto; + padding: 2rem 1rem 3rem; display: flex; flex-direction: column; gap: 1rem; + flex: 1; } .app-header { @@ -204,31 +197,6 @@ body.dark-theme .app-header { } } -@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 */ .hero-input-card { width: 100%; @@ -259,7 +227,7 @@ body.dark-theme .app-header { .input-wrapper { display: flex; gap: 1rem; - flex-wrap: wrap; + flex-wrap: nowrap; } .input-wrapper input { @@ -268,8 +236,8 @@ body.dark-theme .app-header { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border); border-radius: 1.5rem; - padding: 1rem; - font-size: 2rem; + padding: 0.75rem 1rem; + font-size: 1rem; color: var(--text-primary); } @@ -392,7 +360,7 @@ body.dark-theme .app-header { .recent-header { display: flex; justify-content: space-between; - margin-bottom: 1rem; + margin-bottom: 0.4rem; padding: 0 0.5rem; align-items: center; } @@ -401,7 +369,7 @@ body.dark-theme .app-header { display: flex; gap: 1rem; overflow-x: auto; - padding: 1rem 16px; + padding: 0.4rem 16px 1rem; scroll-padding-right: 16px; box-sizing: border-box; } @@ -442,21 +410,6 @@ 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 ================================= */ @@ -637,24 +590,6 @@ body.dark-theme .app-header { border-bottom: 1px solid var(--glass-border); } -@media (max-width: 1024px) { - .recent-page-container { - padding: 0 18px; - } -} - -@media (max-width: 768px) { - .recent-page-container { - padding: 0 12px; - } -} - -@media (max-width: 480px) { - .recent-page-container { - padding: 0 8px; - } -} - /* Footer */ footer.big-footer { background: var(--bg); @@ -759,48 +694,6 @@ body.dark-theme .footer-bottom a { color: #a5f3fc; } -/* Responsive adjustments */ -@media (max-width: 900px) { - .footer-grid { - grid-template-columns: 1fr 1fr; - } -} - -@media (max-width: 700px) { - .result-card { - flex-direction: column; - align-items: flex-start; - } - - .result-actions { - align-items: flex-start; - } - - .recent-item { - min-width: 180px; - } -} - -@media (max-width: 600px) { - .hero-input-card h1 { - font-size: 2rem; - } - - .short-url a { - font-size: 1.2rem; - } - - .footer-grid { - grid-template-columns: 1fr; - } - - .footer-bottom { - flex-direction: column; - gap: 1rem; - text-align: center; - } -} - .recent-tray .recent-item .original-url { max-width: 350px; min-width: 0; @@ -853,9 +746,149 @@ body.light-theme .history-link { border-radius: 1rem; padding: 2rem; list-style-type: none; + & li { margin-bottom: 1rem; font-size: 1.1rem; color: var(--text-primary); } } + + + + +/*mobile responsive section */ + +/*tablet version */ +@media (max-width: 1024px) { + .recent-page-container { + padding: 0 18px; + } +} + +/* Mobile (MAIN BREAKPOINT — 700px) */ +@media (max-width: 700px) { + + /* header */ + .hamburger { + display: block; + } + + .header-nav { + display: none; + position: fixed; + top: 55px; + left: 0; + right: 0; + flex-direction: column; + background: var(--bg); + padding: 20px; + gap: 16px; + border-bottom: 1px solid var(--glass-border); + } + + .header-nav.open { + display: flex; + } + + + /* layout */ + .main-layout { + padding: 0.6rem; + } + + .page { + padding: 0 0.5rem; + } + + /* FIX HERO */ + .hero { + margin: 0 0 10px; + text-align: center + } + + .hero h1 { + font-size: 1.2rem !important; + line-height: 1.3; + margin: 0; + } + + .hero-input-card { + padding: 1rem; + } + + .hero-input-card h1 { + font-size: 1.2rem; + } + + /* input */ + .input-wrapper { + flex-direction: column; + gap: 0.5rem; + } + + .input-wrapper input { + font-size: 0.9rem; + padding: 0.6rem; + } + + .btn-primary { + width: 100%; + font-size: 0.9rem; + padding: 0.6rem; + } + + /* result */ + .result-card { + flex-direction: column; + align-items: flex-start; + } + + .result-actions { + align-items: flex-start; + } + + /* recent */ + .recent-header { + font-size: 0.85rem; + margin-bottom: 0.2rem; + } + + .recent-header h3 { + font-size: 0.9rem; + } + + .history-link { + font-size: 0.8rem; + } + + .recent-item { + min-width: 180px; + } + + .scroll-container { + padding-top: 0.2rem; + } + + /* footer */ + footer.big-footer { + padding: 1.5rem 0.8rem 1rem; + } + + .footer-grid { + grid-template-columns: 1fr; + gap: 1rem; + } + + .footer-bottom { + flex-direction: column; + text-align: center; + } +} + +/*Small mobile (optional)*/ +@media (max-width: 480px) { + .recent-page-container { + padding: 0 8px; + } +} \ No newline at end of file diff --git a/app/templates/index.html b/app/templates/index.html index 35ca7e8..3b0c7f7 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -1,57 +1,55 @@ {% extends "layout.html" %} {% block content %} -
-
-

Shorten Your Links

-
-
- -
-
- - Analytics Enabled -
-
- {% if error %} -
- ⚠ {{ error }} +
+

Shorten Your Links

+
+
+
- {% endif %} +
+ + Analytics Enabled +
+
+ {% if error %} +
+ ⚠ {{ error }}
+ {% endif %} +
- {% if new_short_url %} -
-
- {% if qr_image %} - - {% endif %} -
- Ready -
- - {{ new_short_url }} - - -
+{% if new_short_url %} +
+
+ {% if qr_image %} + + {% endif %} + -
{% if qr_image %} Download QR {% endif - %}
-
{% endif %}
-
-

Recently Shortened

- View History → -
-
{% for url in urls %}
-
/{{ url.short_code }}
-
{{ url.original_url }}
-
{% endfor %}
+
{% if qr_image %} Download QR {% endif + %}
+
{% endif %}
+
+

Recently Shortened

+ View History → +
+
{% for url in urls %}
+
/{{ url.short_code }}
+
{{ url.original_url }}
+
{% endfor %}