fix pinned instances, Tailwind edition

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>

src/styles/application.scss

@@ -8,7 +8,6 @@
 @import 'accessibility';
 @import 'navigation';
 @import 'autosuggest';
-@import 'instance-pins';
 
 // COMPONENTS
 @import 'components/buttons';

src/styles/instance-pins.scss

@@ -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;
-
-    }
-
-}