Avoid budget amount truncation by collapsing the dropdown arrow (#6459)

* Avoid budget amount truncation by collapsing the dropdown arrow

* [autofix.ci] apply automated fixes

* fix transitions

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx

@@ -260,9 +260,19 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
           opacity: 0,
           transition: 'opacity .25s',
         },
-        '&:hover .hover-visible': {
+        '&:hover .hover-visible, & .force-visible .hover-visible': {
           opacity: 1,
         },
+        '& .hover-expand': {
+          maxWidth: 0,
+          overflow: 'hidden',
+          transition: 'max-width 0s .25s',
+        },
+        '&:hover .hover-expand, & .hover-expand.force-visible': {
+          maxWidth: '300px',
+          overflow: 'visible',
+          transition: 'max-width 0s linear 0s',
+        },
       }}
     >
       <View
@@ -278,6 +288,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
       >
         {!editing && (
           <View
+            className={`hover-expand ${budgetMenuOpen ? 'force-visible' : ''}`}
             style={{
               flexDirection: 'row',
               flexShrink: 1,
@@ -303,7 +314,6 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
                 width={14}
                 height={14}
                 className="hover-visible"
-                style={budgetMenuOpen ? { opacity: 1 } : {}}
               />
             </Button>
 

packages/desktop-client/src/components/budget/tracking/TrackingBudgetComponents.tsx

@@ -247,9 +247,19 @@ export const CategoryMonth = memo(function CategoryMonth({
           opacity: 0,
           transition: 'opacity .25s',
         },
-        '&:hover .hover-visible': {
+        '&:hover .hover-visible, & .force-visible .hover-visible': {
           opacity: 1,
         },
+        '& .hover-expand': {
+          maxWidth: 0,
+          overflow: 'hidden',
+          transition: 'max-width 0s .25s',
+        },
+        '&:hover .hover-expand, & .hover-expand.force-visible': {
+          maxWidth: '300px',
+          overflow: 'visible',
+          transition: 'max-width 0s linear 0s',
+        },
       }}
     >
       <View
@@ -260,6 +270,7 @@ export const CategoryMonth = memo(function CategoryMonth({
       >
         {!editing && (
           <View
+            className={`hover-expand ${menuOpen ? 'force-visible' : ''}`}
             style={{
               flexDirection: 'row',
               flexShrink: 0,
@@ -283,7 +294,6 @@ export const CategoryMonth = memo(function CategoryMonth({
                 width={14}
                 height={14}
                 className="hover-visible"
-                style={menuOpen && { opacity: 1 }}
               />
             </Button>
 

upcoming-release-notes/6459.md

@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [diepala]
+---
+
+Avoid truncating numbers in budgeted column by collapsing the dropdown arrow.