Polish compact Calendar date card spacing and styling.

Restyle the small calendar date block into a cleaner card layout with aligned typography and slightly increase compact widget height/padding for better top-bottom breathing room.

Made-with: Cursor

google_apps/Widgets/CalendarDesktopWidgetView.swift

@@ -94,7 +94,8 @@ struct CalendarDesktopWidgetView: View {
                     openCalendarPath("/calendar/u/0/r")
                 }
             }
-            .padding(14)
+            .padding(.horizontal, 14)
+            .padding(.vertical, 16)
             .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
         }
         .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
@@ -106,23 +107,31 @@ struct CalendarDesktopWidgetView: View {
         let now = Date()
         let cal = Calendar.current
         let day = cal.component(.day, from: now)
-        let weekday = Self.weekdayFormatter.string(from: now).uppercased()
-        let monthYear = Self.monthYearFormatter.string(from: now)
+        let displayDate = Self.smallDateFormatter.string(from: now)
 
-        return HStack(alignment: .firstTextBaseline, spacing: 14) {
+        return HStack(spacing: 12) {
             Text("\(day)")
                 .font(.system(size: 36, weight: .bold, design: .rounded))
                 .foregroundStyle(.white)
+                .frame(width: 54, alignment: .leading)
             VStack(alignment: .leading, spacing: 2) {
-                Text(weekday)
-                    .font(.system(size: 10, weight: .bold))
-                    .foregroundStyle(.white.opacity(0.55))
-                Text(monthYear)
-                    .font(.system(size: 14, weight: .semibold))
-                    .foregroundStyle(.white.opacity(0.9))
+                Text("Today")
+                    .font(.system(size: 11, weight: .bold))
+                    .foregroundStyle(.white.opacity(0.54))
+                Text(displayDate)
+                    .font(.system(size: 13, weight: .semibold))
+                    .foregroundStyle(.white.opacity(0.92))
+                    .lineLimit(1)
             }
             Spacer(minLength: 0)
         }
+        .padding(10)
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .background(RoundedRectangle(cornerRadius: 12, style: .continuous).fill(Color.black.opacity(0.2)))
+        .overlay(
+            RoundedRectangle(cornerRadius: 12, style: .continuous)
+                .stroke(Color.white.opacity(0.12), lineWidth: 1)
+        )
     }
 
     private func nextEventSummary(_ ev: CalendarEventSnapshot) -> some View {
@@ -427,6 +436,12 @@ struct CalendarDesktopWidgetView: View {
         return f
     }()
 
+    private static let smallDateFormatter: DateFormatter = {
+        let f = DateFormatter()
+        f.dateFormat = "EEEE, MMM d"
+        return f
+    }()
+
     private static let fullDateFormatter: DateFormatter = {
         let f = DateFormatter()
         f.dateFormat = "EEEE, MMM d"

google_apps/Widgets/WidgetTemplates.swift

@@ -610,7 +610,7 @@ extension WidgetLayoutMode {
             return CGSize(width: 480, height: 220)
         case .calendar(let mode):
             switch mode {
-            case .compact: return CGSize(width: 230, height: 260)
+            case .compact: return CGSize(width: 230, height: 272)
             case .agenda: return CGSize(width: 420, height: 320)
             }
         case .interactiveMap:
@@ -682,7 +682,7 @@ extension WidgetLayoutMode {
             return CGSize(width: 440, height: 210)
         case .calendar(let mode):
             switch mode {
-            case .compact: return CGSize(width: 210, height: 240)
+            case .compact: return CGSize(width: 210, height: 250)
             case .agenda: return CGSize(width: 380, height: 290)
             }
         case .interactiveMap: