From 14b53b107660386c066f74ae29f86a3e43a831cd Mon Sep 17 00:00:00 2001
From: Henry Aviles <haviles04@gmail.com>
Date: Tue, 30 Sep 2025 13:59:49 -0400
Subject: [PATCH 1/2] fix: change separator size based on density

---
 .../src/components/VTimePicker/VTimePickerControls.sass  | 8 ++++++++
 .../src/components/VTimePicker/VTimePickerControls.tsx   | 9 +++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/vuetify/src/components/VTimePicker/VTimePickerControls.sass b/packages/vuetify/src/components/VTimePicker/VTimePickerControls.sass
index 6533f48326c..45bc5aeadb9 100644
--- a/packages/vuetify/src/components/VTimePicker/VTimePickerControls.sass
+++ b/packages/vuetify/src/components/VTimePicker/VTimePickerControls.sass
@@ -45,6 +45,14 @@
         height: $time-picker-controls-seconds-btn-height
         font-size: $time-picker-controls-btn-font
 
+    .v-time-picker-controls--density-compact
+      .v-time-picker-controls__time__separator
+        font-size: 16px
+
+    .v-time-picker-controls--density-comfortable
+      .v-time-picker-controls__time__separator
+        font-size: 20px
+
   .v-time-picker-controls__ampm
     margin-left: 12px
     align-self: flex-end
diff --git a/packages/vuetify/src/components/VTimePicker/VTimePickerControls.tsx b/packages/vuetify/src/components/VTimePicker/VTimePickerControls.tsx
index 464e90a6498..4967fa2b1a5 100644
--- a/packages/vuetify/src/components/VTimePicker/VTimePickerControls.tsx
+++ b/packages/vuetify/src/components/VTimePicker/VTimePickerControls.tsx
@@ -6,6 +6,7 @@ import { pad } from './util'
 import { VBtn } from '@/components/VBtn'
 
 // Composables
+import { makeDensityProps, useDensity } from '@/composables/density'
 import { useLocale } from '@/composables/locale'
 
 // Utilities
@@ -28,6 +29,7 @@ export const makeVTimePickerControlsProps = propsFactory({
   useSeconds: Boolean,
   value: Number,
   viewMode: String as PropType<VTimePickerViewMode>,
+  ...makeDensityProps(),
 }, 'VTimePickerControls')
 
 export const VTimePickerControls = genericComponent()({
@@ -42,6 +44,7 @@ export const VTimePickerControls = genericComponent()({
 
   setup (props, { emit, slots }) {
     const { t } = useLocale()
+    const { densityClasses } = useDensity(props)
 
     useRender(() => {
       let hour = props.hour
@@ -51,10 +54,12 @@ export const VTimePickerControls = genericComponent()({
       return (
         <div class="v-time-picker-controls">
           <div
-            class={{
+            class={[{
               'v-time-picker-controls__time': true,
               'v-time-picker-controls__time--with-seconds': props.useSeconds,
-            }}
+            },
+            densityClasses.value,
+            ]}
           >
             <VBtn
               active={ props.viewMode === 'hour' }

From 7b6c158801c3724a254ce74a8fdbf989377867e4 Mon Sep 17 00:00:00 2001
From: J-Sek <J-Sek@users.noreply.github.com>
Date: Thu, 2 Oct 2025 02:26:41 +0200
Subject: [PATCH 2/2] tweaks: align height + bold to make it visible

---
 .../components/VTimePicker/VTimePickerControls.sass    | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/vuetify/src/components/VTimePicker/VTimePickerControls.sass b/packages/vuetify/src/components/VTimePicker/VTimePickerControls.sass
index 45bc5aeadb9..2451fe69832 100644
--- a/packages/vuetify/src/components/VTimePicker/VTimePickerControls.sass
+++ b/packages/vuetify/src/components/VTimePicker/VTimePickerControls.sass
@@ -45,13 +45,17 @@
         height: $time-picker-controls-seconds-btn-height
         font-size: $time-picker-controls-btn-font
 
-    .v-time-picker-controls--density-compact
+    &--density-compact
       .v-time-picker-controls__time__separator
         font-size: 16px
+        font-weight: bold
+        height: 24px
 
-    .v-time-picker-controls--density-comfortable
+    &--density-comfortable
       .v-time-picker-controls__time__separator
-        font-size: 20px
+        font-size: 18px
+        font-weight: bold
+        height: 28px
 
   .v-time-picker-controls__ampm
     margin-left: 12px