bugs

web/assets/script.js

 var types = document.querySelectorAll('input[type=radio][name=type]');
 types.forEach(function (type) {
   type.addEventListener('change', function (e) {
-    document.querySelector('.filters__section--sort').classList.toggle('open');
+    document.querySelector('.filters__subsection--sort').classList.toggle('open');
+    document.querySelector('.filters__subsection--sort input[type=radio]:first-child').checked = true;
   });
 });

web/assets/styles/form.scss

   padding: .5em 0;
 }
 
-.filters__section--sort {
-  display: none;
+.filters__subsection--sort {
+  visibility: hidden;
 }
 
-.filters__section--sort.open {
-  display: flex;
+.filters__subsection--sort.open {
+  visibility: visible;
 }
 
 .filters__subsection {
   flex: 1;
   padding: 0 1em;
+
+  &.filters__subsection--static {
+    flex: 1;
+  }
 }
 
 .form__field {

web/views/partials/search.erb

         </label>
       </div>
     </div>
-    <div class="filters__section filters__section--sort <%= params[:type] == 'threads' ? 'open' : '' %>">
-      <div class="filters__subsection">
+    <div class="filters__section">
+      <div class="filters__subsection filters__subsection--static">
+        <p>Posted by:</p>
+        <input type="text" name="username" value="<%= params[:username] %>" class="form__text-field">
+      </div>
+      <div class="filters__subsection filters__subsection--sort <%= params[:type] == 'threads' ? 'open' : '' %>">
         <p>Sort by:</p>
         <label class="form__label">
           <input type="radio" name="sort" value="thread" <% if [nil, "thread"].include? params[:sort] %>checked<% end%>>
           Most recent post
         </label>
       </div>
-      <div class="filters__subsection">
-        <p>Posted by:</p>
-        <input type="text" name="username" value="<%= params[:username] %>" class="form__text-field">
-      </div>
     </div>
   </div>
   <input type="submit" value="Search" class="btn form__submit">