UI/UX tweaks and improvements.

app/components/PrivacyToggle.vue

@@ -1,26 +1,27 @@
 <template>
-  <div class="priv">
+  <div class="priv segmented">
     <span
       v-for="opt in options"
       :key="opt.value"
       :class="{ on: modelValue === opt.value }"
       @click="$emit('update:modelValue', opt.value)"
-    >{{ opt.label }}</span>
+      >{{ opt.label }}</span
+    >
   </div>
 </template>
 
 <script setup>
 defineProps({
-  modelValue: { type: String, default: 'public' },
-})
+  modelValue: { type: String, default: "public" },
+});
 
-defineEmits(['update:modelValue'])
+defineEmits(["update:modelValue"]);
 
 const options = [
-  { label: 'Public', value: 'public' },
-  { label: 'Members', value: 'members' },
-  { label: 'Private', value: 'private' },
-]
+  { label: "Public", value: "public" },
+  { label: "Members", value: "members" },
+  { label: "Private", value: "private" },
+];
 </script>
 
 <style scoped>
@@ -28,7 +29,7 @@ const options = [
   display: inline-flex;
   gap: 0;
   font-size: 9px;
-  font-family: 'Commit Mono', monospace;
+  font-family: "Commit Mono", monospace;
   letter-spacing: 0.02em;
 }
 
@@ -44,10 +45,11 @@ const options = [
   transition: all 0.12s;
   user-select: none;
   white-space: nowrap;
+  position: relative;
 }
 
 .priv span + span {
-  border-left: none;
+  margin-left: -1px;
 }
 
 .priv span:hover {
@@ -59,9 +61,6 @@ const options = [
   color: var(--text-bright);
   border-color: var(--candle);
   border-style: solid;
-}
-
-.priv span.on + span {
-  border-left-color: var(--candle);
+  z-index: 1;
 }
 </style>