diff --git a/src/component/timer.rs b/src/component/timer.rs
index 5baf3f08..626deba7 100644
--- a/src/component/timer.rs
+++ b/src/component/timer.rs
@@ -28,6 +28,7 @@ pub struct Component {
 /// Right now these are just gradients, and gradients with delta,
 /// however in the future timers may support other types of backgrounds.]
 #[derive(Copy, Clone, PartialEq, Serialize, Deserialize)]
+#[serde(untagged)]
 pub enum DeltaGradient {
     /// A normal gradient of some kind
     Gradient(Gradient),
diff --git a/src/rendering/component/mod.rs b/src/rendering/component/mod.rs
index a225d0f6..c8c65a4d 100644
--- a/src/rendering/component/mod.rs
+++ b/src/rendering/component/mod.rs
@@ -86,7 +86,8 @@ pub fn width(component: &ComponentState) -> f32 {
         ComponentState::Separator(_) => SEPARATOR_THICKNESS,
         ComponentState::Splits(state) => {
             let column_count = 2.0; // FIXME: Not always 2.
-            let split_width = 2.0 + column_count * splits::COLUMN_WIDTH;
+            let column_width = 2.75; // FIXME: Not always 2.75; difficult to calculate without a renderer.
+            let split_width = 2.0 + column_count * column_width;
             state.splits.len() as f32 * split_width
         }
         ComponentState::Text(_) => 6.0,
diff --git a/src/rendering/component/splits.rs b/src/rendering/component/splits.rs
index bfdcf0f3..c4ef1906 100644
--- a/src/rendering/component/splits.rs
+++ b/src/rendering/component/splits.rs
@@ -1,3 +1,5 @@
+use core::iter;
+
 use crate::{
     component::splits::State,
     layout::{LayoutDirection, LayoutState},
@@ -16,12 +18,12 @@ use crate::{
     settings::{Gradient, ListGradient},
 };
 
-pub const COLUMN_WIDTH: f32 = 2.75;
-
 pub struct Cache<I, L> {
     icons: Vec<Option<Icon<I>>>,
     splits: Vec<SplitCache<L>>,
     column_labels: Vec<CachedLabel<L>>,
+    column_width_label: CachedLabel<L>,
+    column_label_widths: Vec<f32>,
 }
 
 struct SplitCache<L> {
@@ -44,6 +46,8 @@ impl<I, L> Cache<I, L> {
             icons: Vec::new(),
             splits: Vec::new(),
             column_labels: Vec::new(),
+            column_width_label: CachedLabel::new(),
+            column_label_widths: Vec::new(),
         }
     }
 }
@@ -55,6 +59,10 @@ pub(in crate::rendering) fn render<A: ResourceAllocator>(
     component: &State,
     layout_state: &LayoutState,
 ) {
+    const COLUMN_PADDING: f32 = 0.2;
+    let max_column_width =
+        context.measure_numbers("88:88:88", &mut cache.column_width_label, DEFAULT_TEXT_SIZE);
+
     let text_color = solid(&layout_state.text_color);
 
     let split_background = match component.background {
@@ -107,6 +115,8 @@ pub(in crate::rendering) fn render<A: ResourceAllocator>(
         cache.icons[icon_change.segment_index] = context.create_icon(&icon_change.icon);
     }
 
+    cache.column_label_widths.clear();
+
     if let Some(column_labels) = &component.column_labels {
         if layout_state.direction == LayoutDirection::Vertical {
             cache
@@ -114,17 +124,19 @@ pub(in crate::rendering) fn render<A: ResourceAllocator>(
                 .resize_with(column_labels.len(), CachedLabel::new);
 
             let mut right_x = width - PADDING;
-            for (label, cache) in column_labels.iter().zip(&mut cache.column_labels) {
-                let left_x = right_x - COLUMN_WIDTH;
-                context.render_text_right_align(
+            for (label, column_cache) in column_labels.iter().zip(&mut cache.column_labels) {
+                // FIXME: The column width should depend on the column type too.
+                let left_x = context.render_text_right_align(
                     label,
-                    cache,
+                    column_cache,
                     Layer::Bottom,
                     [right_x, TEXT_ALIGN_TOP],
                     DEFAULT_TEXT_SIZE,
                     text_color,
                 );
-                right_x = left_x;
+                let label_width = right_x - left_x;
+                cache.column_label_widths.push(right_x - left_x);
+                right_x -= label_width.max(max_column_width) + COLUMN_PADDING;
             }
 
             context.translate(0.0, DEFAULT_COMPONENT_HEIGHT);
@@ -178,7 +190,15 @@ pub(in crate::rendering) fn render<A: ResourceAllocator>(
                 .columns
                 .resize_with(split.columns.len(), CachedLabel::new);
 
-            for (column, column_cache) in split.columns.iter().zip(&mut split_cache.columns) {
+            for ((column, column_cache), column_label_width) in
+                split.columns.iter().zip(&mut split_cache.columns).zip(
+                    cache
+                        .column_label_widths
+                        .iter()
+                        .cloned()
+                        .chain(iter::repeat(max_column_width)),
+                )
+            {
                 if !column.value.is_empty() {
                     left_x = context.render_numbers(
                         &column.value,
@@ -189,7 +209,7 @@ pub(in crate::rendering) fn render<A: ResourceAllocator>(
                         solid(&column.visual_color),
                     );
                 }
-                right_x -= COLUMN_WIDTH;
+                right_x -= max_column_width.max(column_label_width) + COLUMN_PADDING;
             }
 
             if display_two_rows {
diff --git a/tests/rendering.rs b/tests/rendering.rs
index 105bc5c0..a99c7064 100644
--- a/tests/rendering.rs
+++ b/tests/rendering.rs
@@ -300,11 +300,11 @@ fn check_dims(
             let mut expected_image = expected_image.to_rgba8();
             for (x, y, Rgba([r, g, b, a])) in expected_image.enumerate_pixels_mut() {
                 if x < hash_image.width() && y < hash_image.height() {
-                    let img_hash::image::Rgba([r2, g2, b2, a2]) = hash_image.get_pixel(x, y);
-                    *r = (*r as i16).wrapping_sub(*r2 as i16).unsigned_abs() as u8;
-                    *g = (*g as i16).wrapping_sub(*g2 as i16).unsigned_abs() as u8;
-                    *b = (*b as i16).wrapping_sub(*b2 as i16).unsigned_abs() as u8;
-                    *a = (*a).max(*a2);
+                    let img_hash::image::Rgba([r2, g2, b2, a2]) = *hash_image.get_pixel(x, y);
+                    *r = r.abs_diff(r2);
+                    *g = g.abs_diff(g2);
+                    *b = b.abs_diff(b2);
+                    *a = (*a).max(a2);
                 }
             }
             let diff_path = format!("target/renders/diff/{name}.png");