align month picker years to the month text

actualbudget · Feb 27, 2025 · 8ec8493 · 8ec8493
1 parent 1c931cf
commit 8ec8493
Showing 1 changed file with 20 additions and 17 deletions.
diff --git a/packages/desktop-client/src/components/budget/MonthPicker.tsx b/packages/desktop-client/src/components/budget/MonthPicker.tsx
@@ -128,6 +128,7 @@ export const MonthPicker = ({
             <View
               key={month}
               style={{
+                alignItems: 'center',
                 padding: '3px 3px',
                 width: size === 'big' ? '35px' : '20px',
                 textAlign: 'center',
@@ -188,23 +189,25 @@ export const MonthPicker = ({
               onMouseEnter={() => setHoverId(idx)}
               onMouseLeave={() => setHoverId(null)}
             >
-              {size === 'small' ? monthName[0] : monthName}
-              {showYearHeader && (
-                <View
-                  style={{
-                    position: 'absolute',
-                    top: -14,
-                    left: 0,
-                    fontSize: 10,
-                    fontWeight: 'bold',
-                    color: isMonthBudgeted
-                      ? theme.pageText
-                      : theme.pageTextSubdued,
-                  }}
-                >
-                  {year}
-                </View>
-              )}
+              <View>
+                {size === 'small' ? monthName[0] : monthName}
+                {showYearHeader && (
+                  <View
+                    style={{
+                      position: 'absolute',
+                      top: -16,
+                      left: 0,
+                      fontSize: 10,
+                      fontWeight: 'bold',
+                      color: isMonthBudgeted
+                        ? theme.pageText
+                        : theme.pageTextSubdued,
+                    }}
+                  >
+                    {year}
+                  </View>
+                )}
+              </View>
             </View>
           );
         })}