[RTY-260045]: Fix UI responsiveness, spacing issues, and sticky footer layout

Author: Ravindrayadav04

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;
+  }
+}