From a8ddffce227b1f733fbda8058985b09a606e893e Mon Sep 17 00:00:00 2001
From: matty <matty@nicecrew.digital>
Date: Sat, 20 Jul 2024 13:35:36 -0400
Subject: [PATCH 1/2] fix issue with instance pin overflow, restyle

---
 src/styles/application.scss   |  1 +
 src/styles/instance-pins.scss | 39 +++++++++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+)
 create mode 100644 src/styles/instance-pins.scss

diff --git a/src/styles/application.scss b/src/styles/application.scss
index f0a17c975..c398b9ab7 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -8,6 +8,7 @@
 @import 'accessibility';
 @import 'navigation';
 @import 'autosuggest';
+@import 'instance-pins';
 
 // COMPONENTS
 @import 'components/buttons';
diff --git a/src/styles/instance-pins.scss b/src/styles/instance-pins.scss
new file mode 100644
index 000000000..ada4212fc
--- /dev/null
+++ b/src/styles/instance-pins.scss
@@ -0,0 +1,39 @@
+.flex.rtl\:space-x-reverse.space-x-2.mb-4 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: start;
+  justify-content: space-between;
+  justify-items: start;
+  padding: 0.5rem 0;
+}
+
+.flex.rtl\:space-x-reverse.space-x-2.mb-4 a {
+  margin: 0.25rem 0.75rem;
+  width: 25%;
+  overflow: hidden;
+}
+
+.flex.rtl\:space-x-reverse.space-x-2.mb-4 button {
+  overflow: hidden;
+}
+
+.flex.rtl\:space-x-reverse.space-x-2.mb-4 button span {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+@media (width <= 600px) {
+    .flex.rtl\:space-x-reverse.space-x-2.mb-4 {
+      border-bottom: 1px solid rgba(46, 46, 46, 0.7);
+    }
+
+    .flex.rtl\:space-x-reverse.space-x-2.mb-4 button span {
+      overflow: hidden;
+    }
+
+    .flex.rtl\:space-x-reverse.space-x-2.mb-4 button {
+      font-size: 0.75rem;
+
+    }
+
+}
\ No newline at end of file

From ed9f16bfb72325fe6aa6e15db6a67f60a9a60492 Mon Sep 17 00:00:00 2001
From: matty <matty@nicecrew.digital>
Date: Sat, 20 Jul 2024 14:17:36 -0400
Subject: [PATCH 2/2] fix pinned instances, Tailwind edition

---
 .../components/pinned-hosts-picker.tsx        |  3 +-
 src/styles/application.scss                   |  1 -
 src/styles/instance-pins.scss                 | 39 -------------------
 3 files changed, 2 insertions(+), 41 deletions(-)
 delete mode 100644 src/styles/instance-pins.scss

diff --git a/src/features/remote-timeline/components/pinned-hosts-picker.tsx b/src/features/remote-timeline/components/pinned-hosts-picker.tsx
index 16cd45481..208cd30c5 100644
--- a/src/features/remote-timeline/components/pinned-hosts-picker.tsx
+++ b/src/features/remote-timeline/components/pinned-hosts-picker.tsx
@@ -15,13 +15,14 @@ const PinnedHostsPicker: React.FC<IPinnedHostsPicker> = ({ host: activeHost }) =
   if (!pinnedHosts.length) return null;
 
   return (
-    <HStack className='mb-4' space={2}>
+    <HStack className='mb-4 flex-wrap items-start justify-evenly'>
       {pinnedHosts.map((host) => (
         <Button
           key={host}
           to={`/timeline/${host}`}
           size='sm'
           theme={host === activeHost ? 'accent' : 'secondary'}
+          className='m-1 w-40 p-1'
         >
           {host}
         </Button>
diff --git a/src/styles/application.scss b/src/styles/application.scss
index c398b9ab7..f0a17c975 100644
--- a/src/styles/application.scss
+++ b/src/styles/application.scss
@@ -8,7 +8,6 @@
 @import 'accessibility';
 @import 'navigation';
 @import 'autosuggest';
-@import 'instance-pins';
 
 // COMPONENTS
 @import 'components/buttons';
diff --git a/src/styles/instance-pins.scss b/src/styles/instance-pins.scss
deleted file mode 100644
index ada4212fc..000000000
--- a/src/styles/instance-pins.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-.flex.rtl\:space-x-reverse.space-x-2.mb-4 {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: start;
-  justify-content: space-between;
-  justify-items: start;
-  padding: 0.5rem 0;
-}
-
-.flex.rtl\:space-x-reverse.space-x-2.mb-4 a {
-  margin: 0.25rem 0.75rem;
-  width: 25%;
-  overflow: hidden;
-}
-
-.flex.rtl\:space-x-reverse.space-x-2.mb-4 button {
-  overflow: hidden;
-}
-
-.flex.rtl\:space-x-reverse.space-x-2.mb-4 button span {
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-@media (width <= 600px) {
-    .flex.rtl\:space-x-reverse.space-x-2.mb-4 {
-      border-bottom: 1px solid rgba(46, 46, 46, 0.7);
-    }
-
-    .flex.rtl\:space-x-reverse.space-x-2.mb-4 button span {
-      overflow: hidden;
-    }
-
-    .flex.rtl\:space-x-reverse.space-x-2.mb-4 button {
-      font-size: 0.75rem;
-
-    }
-
-}
\ No newline at end of file