@@ -16,6 +16,7 @@ const ALL: ToolbarTier[] = [...TOOLBAR_TIERS]
1616// One easy-to-reason-about width per tier.
1717const W : Record < ToolbarTier , number > = {
1818 group : 100 ,
19+ color : 80 ,
1920 nav : 200 ,
2021 date : 150 ,
2122 zoom : 120 ,
@@ -39,24 +40,31 @@ describe('computeToolbarOverflow', () => {
3940 } )
4041
4142 it ( 'keeps everything inline when it fits exactly' , ( ) => {
42- // 100+200+150+120+60+90 = 720 , plus five gaps = 740
43- const r = computeToolbarOverflow ( ALL , W , 740 , GAP , MORE )
43+ // 100+80+ 200+150+120+60+90 = 800 , plus six gaps = 824
44+ const r = computeToolbarOverflow ( ALL , W , 824 , GAP , MORE )
4445 expect ( r . hidden ) . toEqual ( [ ] )
4546 expect ( r . visible ) . toEqual ( ALL )
4647 } )
4748
4849 it ( 'collapses the least important tier first' , ( ) => {
49- const r = computeToolbarOverflow ( ALL , W , 739 , GAP , MORE )
50+ const r = computeToolbarOverflow ( ALL , W , 823 , GAP , MORE )
5051 expect ( r . hidden ) . toEqual ( [ 'savedview' ] )
51- expect ( r . visible ) . toEqual ( [ 'group' , 'nav' , 'date' , 'zoom' , 'undo' ] )
52+ expect ( r . visible ) . toEqual ( [ 'group' , 'color' , ' nav', 'date' , 'zoom' , 'undo' ] )
5253 } )
5354
5455 it ( 'collapses further tiers in TOOLBAR_COLLAPSE_ORDER as space shrinks' , ( ) => {
55- expect ( computeToolbarOverflow ( ALL , W , 600 , GAP , MORE ) . hidden ) . toEqual ( [ 'date' , 'savedview' ] )
56- expect ( computeToolbarOverflow ( ALL , W , 450 , GAP , MORE ) . hidden ) . toEqual ( [ 'group' , 'date' , 'savedview' ] )
57- expect ( computeToolbarOverflow ( ALL , W , 400 , GAP , MORE ) . hidden ) . toEqual ( [ 'group' , 'date' , 'undo' , 'savedview' ] )
56+ expect ( computeToolbarOverflow ( ALL , W , 600 , GAP , MORE ) . hidden ) . toEqual ( [ 'color' , 'date' , 'savedview' ] )
57+ expect ( computeToolbarOverflow ( ALL , W , 450 , GAP , MORE ) . hidden ) . toEqual ( [ 'group' , 'color' , 'date' , 'savedview' ] )
58+ expect ( computeToolbarOverflow ( ALL , W , 400 , GAP , MORE ) . hidden ) . toEqual ( [
59+ 'group' ,
60+ 'color' ,
61+ 'date' ,
62+ 'undo' ,
63+ 'savedview'
64+ ] )
5865 expect ( computeToolbarOverflow ( ALL , W , 300 , GAP , MORE ) . hidden ) . toEqual ( [
5966 'group' ,
67+ 'color' ,
6068 'date' ,
6169 'zoom' ,
6270 'undo' ,
@@ -71,7 +79,7 @@ describe('computeToolbarOverflow', () => {
7179 } )
7280
7381 it ( 'never drops a tier — visible + hidden is always the input set' , ( ) => {
74- for ( const available of [ - 1 , 0 , 30 , 120 , 300 , 500 , 740 , 2000 ] ) {
82+ for ( const available of [ - 1 , 0 , 30 , 120 , 300 , 500 , 824 , 2000 ] ) {
7583 const r = computeToolbarOverflow ( ALL , W , available , GAP , MORE )
7684 expect ( [ ...r . visible , ...r . hidden ] . sort ( ) ) . toEqual ( [ ...ALL ] . sort ( ) )
7785 }
@@ -83,6 +91,13 @@ describe('computeToolbarOverflow', () => {
8391 expect ( r . hidden ) . toEqual ( ALL . filter ( ( t ) => r . hidden . includes ( t ) ) )
8492 } )
8593
94+ it ( 'keeps grouping inline when only one of the two view controls fits' , ( ) => {
95+ const present : ToolbarTier [ ] = [ 'group' , 'color' , 'nav' , 'zoom' , 'undo' ]
96+ const r = computeToolbarOverflow ( present , W , 510 , GAP , 0 )
97+ expect ( r . visible ) . toEqual ( [ 'group' , 'nav' , 'zoom' , 'undo' ] )
98+ expect ( r . hidden ) . toEqual ( [ 'color' ] )
99+ } )
100+
86101 it ( 'ignores tiers that are not present' , ( ) => {
87102 const present : ToolbarTier [ ] = [ 'nav' , 'zoom' ]
88103 // nav(200) + zoom(120) + gap = 324 > 240; nav alone plus the "…" trigger
0 commit comments