From 7d655c3dd5d2a18968b0baafc4890e0c41cd5bf5 Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Thu, 19 Sep 2019 05:54:19 +0200
Subject: [PATCH] Improve dynamic resizing of search and photo rail

---
 src/sass/inputs.scss             |  1 +
 src/sass/profile/photo-rail.scss | 20 ++++++++++++++++++++
 src/sass/search.scss             | 10 ++++++++++
 src/sass/tweet/card.scss         |  1 +
 4 files changed, 32 insertions(+)

diff --git a/src/sass/inputs.scss b/src/sass/inputs.scss
index cb73d2e..a9ad11b 100644
--- a/src/sass/inputs.scss
+++ b/src/sass/inputs.scss
@@ -25,6 +25,7 @@ input[type="text"] {
 .icon-button button {
     color: $accent;
     text-decoration: none;
+    background: none;
     border: none;
     float: none;
     padding: unset;
diff --git a/src/sass/profile/photo-rail.scss b/src/sass/profile/photo-rail.scss
index e67c864..503125c 100644
--- a/src/sass/profile/photo-rail.scss
+++ b/src/sass/profile/photo-rail.scss
@@ -74,3 +74,23 @@
         transition: max-height 0.4s;
     }
 }
+
+@media(max-width: 600px) {
+    .photo-rail-grid {
+        grid-template-columns: repeat(6, 1fr);
+    }
+
+    #photo-rail-grid-toggle:checked ~ .photo-rail-grid {
+        max-height: 300px;
+    }
+}
+
+@media(max-width: 450px) {
+    .photo-rail-grid {
+        grid-template-columns: repeat(4, 1fr);
+    }
+
+    #photo-rail-grid-toggle:checked ~ .photo-rail-grid {
+        max-height: 450px;
+    }
+}
diff --git a/src/sass/search.scss b/src/sass/search.scss
index 521dfc6..6591ca0 100644
--- a/src/sass/search.scss
+++ b/src/sass/search.scss
@@ -42,6 +42,7 @@
 }
 
 .search-panel {
+    width: 100%;
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.4s;
@@ -78,6 +79,15 @@
     grid-column-gap: 10px;
 }
 
+.profile-tabs {
+    @include search-resize(785px, 5, 185px);
+    @include search-resize(725px, 4, 185px);
+    @include search-resize(600px, 6, 140px);
+    @include search-resize(530px, 5, 185px);
+    @include search-resize(475px, 4, 185px);
+    @include search-resize(406px, 3, 250px);
+}
+
 @include search-resize(530px, 5, 185px);
 @include search-resize(475px, 4, 185px);
 @include search-resize(406px, 3, 250px);
diff --git a/src/sass/tweet/card.scss b/src/sass/tweet/card.scss
index fc49aa2..11039f7 100644
--- a/src/sass/tweet/card.scss
+++ b/src/sass/tweet/card.scss
@@ -32,6 +32,7 @@
 
 .card-title {
     @include ellipsis;
+    white-space: unset;
     font-weight: bold;
     font-size: 1.15em;
 }