昨天把進度條和百分比處理完後，今天沒有馬上繼續做累積到 100% 後的抽卡功能，而是先回頭處理主畫面一個已經注意一陣子的問題。
TODAY'S GOALS 現在可以一直新增任務，但任務越多，整個區塊也會跟著一直往下延伸。

保留 4 筆任務的顯示高度，第 5 筆開始改成上下捲動

四筆任務到底有多高？

原本以為只要設定 max-height 和 overflow-y: auto 就能解決，但第一個問題馬上出現：
那 max-height 到底要設多少？

Cline 原本想直接從 CSS 推算，第一次估大約 320px，後來重新計算又變成約 346px。但這些數字都會受到任務本身的高度、padding、margin 等設定影響，最後算出來還是只能是「大概」。

而且它一度想透過修改 pomodoro.html 建立測試環境，這跟 TODAY'S GOALS 無關，所以我們直接阻止。
最後的解法：不再讓 AI 猜，直接用 Chrome DevTools 實測。
實際測到:

One task height: 55.13px
4 tasks occupied height: 274.51px
Current goals-container height: 274.51px

最後包含任務之間的間距，4 筆任務實際佔用的高度是約 274.5px，所以直接以瀏覽器實際渲染的結果作為基準

CSS
#goals-container {
    max-height: 274.5px;
    overflow-y: auto;
}

這樣第 5 筆之後，TODAY'S GOALS 就不會繼續往下長，而是只有任務列表可以捲動。

輸入框不要一起被捲走

原本還以為可能需要再新增一層 wrapper，但 Cline 讀完目前 HTML 後發現結構其實已經很適合

daily-goals
│
├── goals-container
│ ├── 任務 1
│ ├── 任務 2
│ └── ...
│
├── new-goal-input
│
└── add-goal-button

任務都在#goals-container 裡，但輸入框和按鈕本來就是它的兄弟元素，不在裡面。
所以最後完全不用改 HTML 和 JavaScript，只讓 #goals-container scroll，就能讓下面的輸入框和新增按鈕留在原位。
這也是今天最後修改範圍能縮到只有 style.css 的原因。

功能好了，但捲軸有點醜

功能修改成功後，原本的問題確實解決了，但看到右邊 Chrome 預設的捲軸，又覺得跟整個畫面的風格完全不搭。

是一整條白底＋灰色滑塊＋上下箭頭，放在現在黃色、圓角的介面裡很突兀，所以最後沒有動 scroll 邏輯，而是只修改 scrollbar 的 CSS 外觀。

CSS
#goals-container::-webkit-scrollbar {
    width: 6px;
}

#goals-container::-webkit-scrollbar-track {
    background: transparent;
}

#goals-container::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

今天原本只是想解決「任務太多，版面會一直往下長」這個小問題，最後也確實只修改了 CSS。
不過中間讓我比較有印象的反而是高度的處理。AI 可以根據 CSS 幫我推算，但當算出來的結果一直都只能是「大概」時，直接回到瀏覽器看實際渲染結果反而更快。
現在 TODAY'S GOALS 不管再繼續增加多少任務，都會維持原本的高度，需要的時候再往下滑就好。