Merge pull request 'Responsive design' (#7) from React-Group/interstellar_ai:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/YasinOnm08/interstellar_ai/pulls/7

app/styles/output.css

@@ -62,6 +62,7 @@
     background-color: var(--button-background-color);
     border-radius: 50%;
     padding: 10px;
+    padding-top: 0;
     transition: background-color 0.3s ease;
 }
 

app/styles/responsive.css

@@ -1,76 +1,68 @@
-/* responsive.css */
-
 /* Responsive behavior - applies only on smaller screens */
 @media (max-width: 1200px) {
-
-    /* Left panel as an overlay */
-    .left-panel {
-        margin: 0 auto;
-        min-width: 100vw;
-        max-width: 100vw;
-        padding: 1em;
-    }
-
-    .left-panel.hidden {
-        width: 0;
-        /* Set width to 0 when hidden */
-        visibility: hidden;
-        /* Fully hide the panel */
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-    }
-
-    header {
-        height: 125px;
-    }
-
-    header li {
-        flex-direction: column;
-        display: block;
-        padding: 2px;
-    }
-
-    body {
-        margin-top: 100px;
-    }
-
-    .conversation-container.expanded {
-
-        width: 0;
-        /* Set width to 0 when hidden */
-        visibility: hidden;
-        /* Fully hide the panel */
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-    }
-
-    .conversation-container.collapsed {
-        margin: 0 auto;
-        min-width: 100vw;
-        max-width: 100vw;
-        padding: 1em;
-        margin-left: 0;
-
-    }
-}
-
-/* Responsive design adjustments */
-@media (max-width: 768px) {
-  .title {
-    font-size: 1.5rem;
+  header li{
+    display: block;
   }
 
-  .subtitle {
-    font-size: 1.25rem;
+  .container {
+    display: flex;
+    justify-content: center; /* Centers horizontally */
+    width: 90vw;
+    margin-top: 10vh;
+  }
+  
+  .left-panel {
+    display: none; /* Initially hidden */
+    min-width: 90%; /* Takes full width when shown */
+    margin: 0;
+  }
+  
+
+  .conversation-container {
+      width: 90%;
   }
 
-  .subsection-title {
-    font-size: 1rem;
+  .left-panel.visible {
+      display: block;
   }
 
-  .paragraph {
-    font-size: 0.9rem;
+  .conversation-container.collapsed {
+      display: none;
+  }
+
+  .conversation-container.expanded {
+      width: 100%;
+  } 
+  
+  .grid {
+    grid-template-columns: 1fr; /* One item per line */
+  }
+
+  .model-box {
+      max-width: none; /* Remove max-width constraint */
+      margin: 0 auto; /* Center each model-box */
+  }
+
+  .input {
+    grid-column: 1 / -1;
+    flex-direction: row;
+    gap: 10px;
+    padding: 0.5em;
+    margin: 0 auto;
+    align-items: center;
+    width: 90%;
+  }
+
+  .input input {
+      font-size: 1em; /* Adjust font size */
+      max-width: 65%;
+      margin-right: 0;
+  }
+
+  .input button {
+      height: 40px; /* Adjust button height */
+      width: 40px; /* Adjust button width */
+      font-size: 1.2em; /* Adjust button font size */
+      margin: auto;
   }
 }