chore+feat(css): added styling for follow button and new search in navbar

src/sass/general.scss

@@ -37,3 +37,52 @@
         height: unset;
     }
 }
+
+.follow-form {
+    display: inline-block;
+    pointer-events: all;
+}
+
+.follow-button {
+    background-color: transparent;
+    color: var(--accent);
+    border: 1px solid var(--accent);
+    border-radius: 50%;
+    padding: 4px 12px;
+    font-weight: 700;
+    font-size: 14px;
+    cursor: pointer;
+    line-height: 1.2;
+    transition: background-color 0.2s;
+    outline: none;
+
+    &:hover {
+        background-color: var(--bg_hover);
+    }
+
+    &.unfollow {
+        color: #e0245e;
+        border-color: #e0245e;
+
+        &:hover {
+             background-color: rgba(224, 36, 94, 0.1);
+        }
+    }
+}
+
+.profile-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex: 1;
+    min-width: 0;
+}
+
+.tweet-name-row .follow-form {
+    margin-left: 10px;
+}
+
+.tweet-name-row .follow-button {
+    padding: 2px 10px;
+    font-size: 13px;
+}

src/sass/include/_mixins.css

@@ -61,23 +61,8 @@
 
 @mixin search-resize($width, $rows) {
     @media(max-width: $width) {
-        .search-toggles {
-            grid-template-columns: repeat($rows, auto);
-        }
-
         #search-panel-toggle:checked ~ .search-panel {
-            @if $rows == 6 {
-                max-height: 200px !important;
-            }
-            @if $rows == 5 {
-                max-height: 300px !important;
-            }
-            @if $rows == 4 {
-                max-height: 300px !important;
-            }
-            @if $rows == 3 {
-                max-height: 365px !important;
-            }
+            max-height: 80vh !important;
         }
     }
 }

src/sass/navbar.scss

@@ -25,6 +25,14 @@ nav {
     align-items: center;
     flex-basis: 920px;
     height: 50px;
+    gap: 15px;
+}
+
+.inner-nav .search-field {
+    flex: 1;
+    margin: 0 auto;
+    max-width: 350px;
+    min-width: 0;
 }
 
 .site-name {
@@ -46,11 +54,11 @@ nav {
 
 .nav-item {
     display: flex;
-    flex: 1;
+    flex: 0 0 auto;
     line-height: 50px;
     height: 50px;
     overflow: hidden;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     align-items: center;
 
     &.right {

src/sass/search.scss

@@ -9,19 +9,22 @@
 
 .search-field {
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+    position: relative;
 
     button {
         margin: 0 2px 0 0;
         height: 23px;
         display: flex;
         align-items: center;
+        flex: 0 0 auto;
     }
 
     .pref-input {
         margin: 0 4px 0 0;
         flex-grow: 1;
         height: 23px;
+        min-width: 0;
     }
 
     input[type="text"] {
@@ -30,49 +33,86 @@
     }
 
     > label {
-        display: inline;
+        display: flex;
+        align-items: center;
+        height: 23px;
         background-color: var(--bg_elements);
         color: var(--fg_color);
         border: 1px solid var(--accent_border);
-        padding: 1px 6px 2px 6px;
+        padding: 0 6px;
         font-size: 14px;
         cursor: pointer;
-        margin-bottom: 2px;
+        margin-bottom: 0;
+        box-sizing: border-box;
 
         @include input-colors;
     }
 
-    @include create-toggle(search-panel, 200px);
+    @include create-toggle(search-panel, 600px);
 }
 
 .search-panel {
     width: 100%;
+    margin-top: 5px;
+    border: 1px solid var(--accent_border);
     max-height: 0;
-    overflow: hidden;
+    overflow-y: auto;
+    overflow-x: hidden;
     transition: max-height 0.4s;
+    
+    position: absolute;
+    top: 100%;
+    left: 0;
+    background-color: var(--bg_overlays);
+    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
+    border-radius: 0 0 4px 4px;
+    z-index: 2000;
+    padding: 5px 10px;
+    box-sizing: border-box;
+
+    opacity: 0;
+    visibility: hidden;
+    transition: max-height 0.4s, opacity 0.4s, visibility 0.4s;
 
-    flex-grow: 1;
     font-weight: initial;
     text-align: left;
+    font-size: 13px;
 
     > div {
-        line-height: 1.7em;
+        line-height: 1.4em;
+        margin-bottom: 4px;
     }
 
     .checkbox-container {
-        display: inline;
+        display: inline-flex;
+        align-items: center;
         padding-right: unset;
-        margin-bottom: unset;
-        margin-left: 23px;
+        margin-bottom: 2px;
+        margin-left: 18px;
+        margin-right: 0;
+        white-space: nowrap;
     }
 
     .checkbox {
         right: unset;
-        left: -22px;
+        left: -18px;
+        width: 15px;
+        height: 15px;
     }
 
     .checkbox-container .checkbox:after {
-        top: -4px;
+        top: 0;
+        left: 1px;
+        bottom: unset;
+        font-size: 13px;
+        width: auto;
+        height: auto;
+    }
+    
+    .search-title {
+        font-size: 13px;
+        margin-top: 2px;
+        margin-bottom: 2px;
     }
 }
 
@@ -92,11 +132,11 @@
 
     .pref-input {
         display: block;
-        padding-bottom: 5px;
+        padding-bottom: 2px;
 
         input {
             height: 21px;
-            margin-top: 1px;
+            margin-top: 0;
         }
     }
 }
@@ -104,8 +144,13 @@
 .search-toggles {
     flex-grow: 1;
     display: grid;
-    grid-template-columns: repeat(6, auto);
-    grid-column-gap: 10px;
+    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
+    gap: 5px 10px;
+}
+
+#search-panel-toggle:checked ~ .search-panel {
+    opacity: 1;
+    visibility: visible;
 }
 
 .profile-tabs {
@@ -120,3 +165,16 @@
 @include search-resize(560px, 5);
 @include search-resize(480px, 4);
 @include search-resize(410px, 3);
+
+@media(max-width: 600px) {
+    .search-panel {
+        position: fixed;
+        top: 50px;
+        left: 0;
+        right: 0;
+        width: 100%;
+        border-radius: 0;
+        border-top: 1px solid var(--accent_border);
+        box-shadow: 0 4px 6px rgba(0,0,0,0.3);
+    }
+}