fix(ui): fixes for mobile UI, settings and sessions pages (#451)

Co-authored-by: trashtemp <96388163+trashtemp@users.noreply.github.com>

src/pages/settings/panes/Panes.module.scss

@@ -196,6 +196,14 @@
         margin-top: 8px;
         gap: 4px;
 
+        svg {
+            flex-shrink: 0;
+        }
+
+        a:hover {
+            text-decoration: underline;
+        }
+
         h5 {
             margin: 0;
         }
@@ -229,8 +237,11 @@
 }
 
 .audio {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
     .audioRow {
-        margin-top: 20px;
         display: flex;
         gap: 20px;
 
@@ -242,10 +253,11 @@
     .audioBox {
         display: flex;
         flex-direction: column;
-        gap: 15px;
+        /*gap: 15px;*/
         align-items: center;
 
         > button {
+            margin-top: 20px;
             width: 100%;
         }
     }
@@ -261,6 +273,36 @@
     }
 }
 
+.opus {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 12px;
+    opacity: 0.5;
+    margin-top: -12px;
+
+    > img {
+        height: 24px;
+    }
+}
+
+.notches {
+    margin: 10px 2px 0;
+    display: flex;
+    width: 100%;
+    border-radius: 60px;
+    overflow: hidden;
+    justify-content: space-between;
+    gap: 5px;
+
+    > div {
+        height: 8px;
+        width: 24px;
+        background: var(--secondary-background);
+        border-radius: 2px;
+    }
+}
+
 .appearance {
     .theme {
         min-width: 0;
@@ -499,7 +541,7 @@
         &[data-active="true"] {
             color: var(--primary-background);
             background: var(--accent);
-            margin-bottom: 20px;
+            margin-bottom: 25px;
 
             .session .detail .info > input {
                 &:focus {
@@ -653,12 +695,19 @@
 }
 
 .myBots {
+    margin-top: 10px;
+    .botList {
+        display: flex;
+        flex-direction: column;
+        margin-top: 8px;
+        gap: 16px;
+    }
+
     .botCard {
         display: flex;
         flex-direction: column;
         gap: 10px;
         background: var(--secondary-background);
-        margin: 8px 0;
         padding: 12px;
         border-radius: var(--border-radius);
     }