From f0cadff64b0c804ed1fa880c48917a42a15a4d24 Mon Sep 17 00:00:00 2001
From: sneakers-the-rat <sneakers-the-rat@protonmail.com>
Date: Fri, 1 Nov 2024 22:31:52 -0700
Subject: [PATCH 1/2] fix responsiveness in paper list view

---
 app/assets/stylesheets/application.scss | 70 ++++++++++++++++++++++---
 app/views/papers/index.html.erb         | 14 ++---
 2 files changed, 72 insertions(+), 12 deletions(-)

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 72b73aae..99f3f5d5 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -294,7 +294,7 @@ TODO
 }
 
 .tabnav-tab {
-    padding: 1em 1.6em;
+    padding: 1rem 1.6rem;
     background: #fff;
     color: #2E294E;
     transition: background-color .3s ease-out;
@@ -637,10 +637,51 @@ $btn-primary-border: darken($btn-primary-bg, 5%) !default;
     }
 }
 
+.paper-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 0.5em;
+    height: calc(1.5em + 0.75rem + 2px); // same as bootstrap input height
+
+    @include media-breakpoint-down(md){
+        .form-inline {
+            margin-top: 0 !important; // bootstrap forces this as important
+            max-width: 50%
+        }
+    }
+    @include media-breakpoint-down(sm){
+        flex-direction: column;
+        height: unset;
+
+        .btn-group {
+            width: 100%;
+            display: flex;
+            .tabnav-tab {
+                flex-grow: 1;
+                justify-content: center;
+            }
+        }
+
+        .form-inline {
+            width: 100%;
+            max-width: unset;
+            .input-group {
+                width: 100%;
+                margin-bottom: 0 !important; // bootstrap forces important
+            }
+        }
+    }
+}
+
 .paper-list {
     margin-top: 1.5em;
     font-size: 14px;
 
+    @include media-breakpoint-down(sm){
+        margin-top: 0;
+    }
+
     .paper-card {
         background: #fff;
         border-radius: .25em;
@@ -757,12 +798,29 @@ $btn-primary-border: darken($btn-primary-bg, 5%) !default;
     border: 1px solid #EAE9ED;
     font-size: 12px;
 
-    .tabnav-tab:first-of-type {
-        border-radius: 0.25em 0 0 0.25em;
-    }
+    .tabnav-tab {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
 
-    .tabnav-tab:last-of-type {
-        border-radius: 0 0.25em 0.25em 0;
+        @include media-breakpoint-down(md){
+            padding-left: 0.5em;
+            padding-right: 0.5em;
+        }
+
+        @include media-breakpoint-down(sm){
+            height: calc(1.5em + 0.75rem + 2px);
+        }
+
+
+        &:first-of-type {
+            border-radius: 0.25em 0 0 0.25em;
+        }
+
+        &:last-of-type {
+            border-radius: 0 0.25em 0.25em 0;
+        }
     }
 }
 
diff --git a/app/views/papers/index.html.erb b/app/views/papers/index.html.erb
index 53b593dc..f73fdc78 100644
--- a/app/views/papers/index.html.erb
+++ b/app/views/papers/index.html.erb
@@ -12,19 +12,20 @@
 
 <div class="container">
 
+  <div class="paper-header">
     <div class="btn-group" role="group" aria-label="Paper Status">
 
       <%= link_to papers_path, class: "tabnav-tab #{selected_class('index')}" do %>
-      All Papers
-      <div class="count-badge"><%= raw Paper.public_everything.count %></div>
+        <span class="count-label">All Papers</span>
+        <div class="count-badge"><%= raw Paper.public_everything.count %></div>
       <% end %>
       <%= link_to published_papers_path, class: "tabnav-tab #{selected_class('popular')}" do %>
-      Published Papers
-      <div class="count-badge"><%= raw Paper.visible.count %></div>
+        <span class="count-label">Published Papers</span>
+        <div class="count-badge"><%= raw Paper.visible.count %></div>
       <% end %>
       <%= link_to active_papers_path, class: "tabnav-tab #{selected_class('active')}" do %>
-      Active Papers
-      <div class="count-badge"><%= raw Paper.public_in_progress.count %></div>
+        <span class="count-label">Active Papers</span>
+        <div class="count-badge"><%= raw Paper.public_in_progress.count %></div>
       <% end %>
     </div>
 
@@ -39,6 +40,7 @@
       </div>
     </div>
     <% end %>
+  </div>
 
   <div id ="primary-content row" class="paper-list">
     <%= render partial: "list", locals: { papers: @papers } %>

From 5fb018953774c3248931384d831e8a544c4778d4 Mon Sep 17 00:00:00 2001
From: sneakers-the-rat <sneakers-the-rat@protonmail.com>
Date: Fri, 1 Nov 2024 22:38:28 -0700
Subject: [PATCH 2/2] big buttons on small screens

---
 app/assets/stylesheets/application.scss | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 99f3f5d5..cd28af3f 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -575,16 +575,9 @@ TODO
     padding: .25em .5em;
     border-radius: .5em;
     margin-left: .5em;
-
-    @media (max-width: 580px) {
-        background: none !important;
-        display: block;
-        text-align: center;
-    }
 }
 
 
-
 // Temp place for bootstrap variables
 $font-family-sans-serif:'Inter',
 -apple-system,
@@ -810,7 +803,8 @@ $btn-primary-border: darken($btn-primary-bg, 5%) !default;
         }
 
         @include media-breakpoint-down(sm){
-            height: calc(1.5em + 0.75rem + 2px);
+            flex-direction: column;
+            padding: 1em 1.5em;
         }