From 927d6d284246360f98cf8ee8d82a68edd92381f3 Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle <andrew@speckle.systems>
Date: Wed, 30 Jul 2025 11:00:04 +0200
Subject: [PATCH] Tidyups

---
 .../viewer/compare-changes/Panel.vue          | 14 ++++++++++--
 .../components/viewer/models/Actions.vue      | 22 +++++++++----------
 .../src/components/form/Range.vue             |  3 ++-
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/packages/frontend-2/components/viewer/compare-changes/Panel.vue b/packages/frontend-2/components/viewer/compare-changes/Panel.vue
index 5aa7580b0..afaccb625 100644
--- a/packages/frontend-2/components/viewer/compare-changes/Panel.vue
+++ b/packages/frontend-2/components/viewer/compare-changes/Panel.vue
@@ -1,9 +1,18 @@
 <template>
   <ViewerLayoutSidePanel>
     <template #title>
-      <FormButton color="subtle" text :icon-left="ChevronLeftIcon" @click="handleBack">
+      <div class="flex items-center gap-1">
+        <FormButton
+          color="subtle"
+          :icon-left="ChevronLeftIcon"
+          hide-text
+          size="sm"
+          @click="handleBack"
+        >
+          Go back
+        </FormButton>
         Go back
-      </FormButton>
+      </div>
     </template>
     <div class="flex flex-col text-sm p-2">
       <div
@@ -33,6 +42,7 @@
         <FormRange
           v-model="localDiffTime"
           label="Diff time"
+          hide-header
           :min="0"
           :max="1"
           :step="0.01"
diff --git a/packages/frontend-2/components/viewer/models/Actions.vue b/packages/frontend-2/components/viewer/models/Actions.vue
index 3ca7f8f13..ae11a6745 100644
--- a/packages/frontend-2/components/viewer/models/Actions.vue
+++ b/packages/frontend-2/components/viewer/models/Actions.vue
@@ -1,24 +1,22 @@
 <template>
   <div class="flex pr-1">
     <div v-tippy="'Versions'" class="flex">
-      <FormButton
-        color="subtle"
-        :icon-left="IconVersions"
-        hide-text
+      <button
+        class="group-hover:opacity-100 hover:bg-highlight-3 rounded-md h-6 w-6 flex items-center justify-center shrink-0"
         @click="$emit('showVersions')"
       >
-        Versions
-      </FormButton>
+        <IconVersions class="w-4 h-4" />
+        <span class="sr-only">Versions</span>
+      </button>
     </div>
     <div v-tippy="'Add model'" class="flex">
-      <FormButton
-        color="subtle"
-        hide-text
-        :icon-left="IconPlus"
+      <button
+        class="group-hover:opacity-100 hover:bg-highlight-3 rounded-md h-6 w-6 flex items-center justify-center shrink-0"
         @click="$emit('addModel')"
       >
-        Add model
-      </FormButton>
+        <IconPlus class="w-4 h-4" />
+        <span class="sr-only">Add model</span>
+      </button>
     </div>
   </div>
 </template>
diff --git a/packages/ui-components/src/components/form/Range.vue b/packages/ui-components/src/components/form/Range.vue
index 424c63257..27fb8eff6 100644
--- a/packages/ui-components/src/components/form/Range.vue
+++ b/packages/ui-components/src/components/form/Range.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="w-full">
-    <div class="flex items-center justify-between">
+    <div v-if="!hideHeader" class="flex items-center justify-between">
       <label
         :for="name"
         class="block text-body-2xs"
@@ -50,6 +50,7 @@ const props = defineProps<{
   name: string
   label: string
   disabled?: boolean
+  hideHeader?: boolean
 }>()
 
 const emit = defineEmits(['update:modelValue'])