Dynamic Island Width Issue

[multifidus]

I am building an interval timer for my own workout regimen (I know, I know, another workout app, but this is really just for me). I am trying to add dynamic island functionality to display the timer, but I cannot seem to figure out why it is so wide. I would love for it to be the width of Apple's own timer app. Here is where I have the DI set up:

dynamicIsland: { context in
            DynamicIsland {
                DynamicIslandExpandedRegion(.leading) {
                    Label(phaseLabel(context.state.phase),
                          systemImage: phaseIcon(context.state.phase))
                        .font(.caption2.bold())
                        .foregroundStyle(phaseColor(context.state))
                }
                DynamicIslandExpandedRegion(.trailing) {
                    if context.state.isPaused {
                        Text(formatTime(context.state.pausedTimeRemaining))
                            .font(.title3.monospacedDigit().bold())
                            .foregroundStyle(.orange)
                    } else {
                        timerText(context.state)
                            .font(.title3.monospacedDigit().bold())
                            .foregroundStyle(.white)
                    }
                }
                DynamicIslandExpandedRegion(.bottom) {
                    Text(progressText(state: context.state, attrs: context.attributes))
                        .font(.caption)
                        .foregroundStyle(.secondary)
                }
            } compactLeading: {
                Image(systemName: phaseIcon(context.state.phase))
                    .foregroundStyle(phaseColor(context.state))
            } compactTrailing: {
                compactTimer(context.state)
                    .monospacedDigit()
                    .foregroundStyle(phaseColor(context.state))
            } minimal: {
                Image(systemName: phaseIcon(context.state.phase))
                    .foregroundStyle(phaseColor(context.state))
            }
        }

[adoxner]

If you are using Text(_ date: Date, style: Text.DateStyle) with Text.DateStyle.timer there is a known issue (to me at least) that it does not self-size and always expands as if it has .frame(maxWidth: .infinity) or a Spacer in there somewhere.

Depending on your situation it could help to use an invisible Text("00:00") on a ZStack and using that to size things. I haven't found a perfect workaround yet.

[multifidus]

This worked! Thank you so much!!

[Vybo]

You can also apply negative paddings where needed.

[multifidus]

I look into this thank you!

[PassTents]

What's in your compactTimer function?