[RTY-260041]: added respnosiveness

Author: Ravindrayadav04

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,7 @@ body.light-theme {
   justify-content: space-between;
   padding: 0 10px;
   box-sizing: border-box;
-
+  overflow: hidden;
   background: var(--glass);
   border-bottom: 1px solid var(--glass-border);
   z-index: 1000;
@@ -94,6 +102,9 @@ body.light-theme .app-header {
   display: flex;
   gap: 26px;
   margin: 0 auto;
+  flex-wrap: wrap;
+  white-space: nowrap;
+  flex-shrink: 1;
 }
 
 .nav-link,
@@ -167,9 +178,25 @@ body.dark-theme .app-header {
 }
 
 @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) {
+
+  .header-nav {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 14px;
+  }
+
 }
 
 /* Hero input */
@@ -380,6 +407,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 +438,7 @@ body.dark-theme .app-header {
 .recent-table-wrapper {
   width: 100%;
   overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 /* ===============================
@@ -406,7 +451,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 +628,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 {