Time picker UI improvements

data/ui/time-popover.ui

@@ -28,6 +28,7 @@
         <property name="visible">True</property>
         <property name="can_focus">False</property>
         <property name="row_spacing">6</property>
+        <property name="column_spacing">3</property>
         <child>
           <object class="GtkCalendar" id="_calendar">
             <property name="visible">True</property>
@@ -43,8 +44,10 @@
           <object class="GtkSpinButton" id="_hours_spin">
             <property name="visible">True</property>
             <property name="can_focus">True</property>
+            <property name="hexpand">True</property>
             <property name="orientation">vertical</property>
             <property name="adjustment">adjustment1</property>
+            <signal name="output" handler="_on_spin_output" swapped="no"/>
           </object>
           <packing>
             <property name="left_attach">0</property>
@@ -55,8 +58,10 @@
           <object class="GtkSpinButton" id="_minutes_spin">
             <property name="visible">True</property>
             <property name="can_focus">True</property>
+            <property name="hexpand">True</property>
             <property name="orientation">vertical</property>
             <property name="adjustment">adjustment2</property>
+            <signal name="output" handler="_on_spin_output" swapped="no"/>
           </object>
           <packing>
             <property name="left_attach">2</property>
@@ -67,8 +72,10 @@
           <object class="GtkSpinButton" id="_seconds_spin">
             <property name="visible">True</property>
             <property name="can_focus">True</property>
+            <property name="hexpand">True</property>
             <property name="orientation">vertical</property>
             <property name="adjustment">adjustment3</property>
+            <signal name="output" handler="_on_spin_output" swapped="no"/>
           </object>
           <packing>
             <property name="left_attach">4</property>

src/timepopover.py

@@ -19,6 +19,11 @@ class TimePopover(Gtk.PopoverMenu):
         self._datetime = GLib.DateTime.new_now_local()
         self._display_datetime(self._datetime)
 
+    @Gtk.Template.Callback()
+    def _on_spin_output(self, spin: Gtk.SpinButton) -> bool:
+        spin.props.text = f'{int(spin.props.value):02d}'
+        return True
+
     @Gtk.Template.Callback()
     def _on_time_apply_clicked(self, btn: Gtk.Button) -> None:
         year, month, day = self._calendar.get_date()