feat: make the clock fill whatever cell it is given

The numerals scaled off the cell but the date block sat at a fixed drop
below them, so a tall cell left a dead band under the date and a short
one would have collided. Now the date pins to the bottom edge, the
numerals take everything above it, and both type sizes derive from the
width, so the slack of a tall cell falls in the middle of the card where
it belongs.

Type scales off width for the same reason the weather card does: height
is what changes when a row is added to the grid, and a widget that
shrinks its text whenever its cell gets shorter reads as broken next to
its neighbours.

Checked at 1x3, 1x6, 2x2, 2x4 and 3x3 on an 8x6 grid before restarting
conky. The 1x6 case stays width-bound and leaves room below the
numerals, which is correct for a cell far taller than it is wide.

The README now states the convention, since it applies to every widget
added later: derive offsets from the rect, scale off width, decide where
the slack goes, and drop an element that would otherwise overlap.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

1 files changed, 31 insertions, 10 deletions

diff --git a/widgets/clock.lua b/widgets/clock.lua
index 978715e..c3e9712 100644
--- a/widgets/clock.lua
+++ b/widgets/clock.lua
@@ -1,18 +1,37 @@
 -- Clock: hour stacked over minute, weekday, slashed date.
 --
 -- Shape follows idea2.png; every colour comes from the palette.
+--
+-- Fluid: every size and offset derives from the rect it is handed, and the
+-- date block pins to the bottom so the slack in a tall cell falls between the
+-- numerals and the date rather than piling up under everything. A widget is
+-- given a rectangle and should fill it, whatever shape the grid makes it.
 
 local card = require 'lib.card'
 
 local M = {}
 
+local function clamp(v, lo, hi) return math.max(lo, math.min(hi, v)) end
+
 function M.draw(cr, rect, colors)
   local inner = card.card(cr, rect, colors)
+  local x = inner.x
+  local bottom = inner.y + inner.h
 
-  -- Numeral size is derived from the cell, not fixed, so the same widget fills
-  -- a 1x2 cell on either monitor instead of needing a per-screen constant.
-  -- Two stacked numerals plus the date block: allow 40% of the height each.
-  local size = math.min(inner.h * 0.40, inner.w * 0.95)
+  -- The date block is sized first, because the numerals get whatever is left.
+  -- Both scale off the WIDTH: height changes with the grid, and a widget that
+  -- shrinks its type every time its cell gets shorter reads as broken next to
+  -- its neighbours. Width is also what actually constrains the date line,
+  -- which runs edge to edge.
+  local day_size  = clamp(inner.w * 0.055, 12, 26)
+  local date_size = clamp(inner.w * 0.050, 11, 24)
+  local date_band = day_size * 1.6 + date_size * 1.8
+
+  -- Two stacked numerals fill the space above the date band. Whichever of
+  -- height and width binds first wins, so a wide short cell is limited by its
+  -- height and a narrow tall one by its width, and neither overflows.
+  local avail = (bottom - date_band) - inner.y
+  local size = math.min(avail * 0.46, inner.w * 0.95)
 
   card.font(cr, card.FONT_HEAVY, size, false)
   card.rgba(cr, colors.body)
@@ -20,7 +39,6 @@ function M.draw(cr, rect, colors)
   -- Baselines. Cairo's y is the baseline, so the first sits one cap-height
   -- down; 0.78 of the font size approximates cap height for Noto Sans and
   -- avoids measuring every frame.
-  local x = inner.x
   local y1 = inner.y + size * 0.78
   -- Tight leading, as in the mockup: the numerals nearly touch.
   local y2 = y1 + size * 0.92
@@ -28,16 +46,19 @@ function M.draw(cr, rect, colors)
   card.text(cr, x, y1, os.date('%H'))
   card.text(cr, x, y2, os.date('%M'))
 
-  -- Weekday, small caps.
-  card.font(cr, card.FONT_UI, 15, true)
+  -- Weekday and date sit against the bottom edge, not at a fixed drop from the
+  -- numerals. That is what puts the slack of a tall cell in the middle of the
+  -- card instead of leaving a dead band under the date.
+  local dy = bottom - date_size * 0.3
+  local wy = dy - date_size * 1.8
+
+  card.font(cr, card.FONT_UI, day_size, true)
   card.rgba(cr, colors.body)
-  local wy = y2 + 34
   card.text(cr, x, wy, os.date('%A'):upper())
 
   -- Date as "16 / SEP / 2026". The slashes take the dimmer label colour so the
   -- numerals read first, which is what gives the mockup's date line its rhythm.
-  card.font(cr, card.FONT_UI, 14, true)
-  local dy = wy + 24
+  card.font(cr, card.FONT_UI, date_size, true)
   local parts = {
     { os.date('%d'), colors.value },
     { ' / ', colors.label },