fix issue with instance pin overflow, restyle

src/styles/application.scss

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

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