Sync: Fix right padding on Windows for select files dropdown by epeicher · Pull Request #1966 · Automattic/studio

epeicher · 2025-10-29T16:15:36Z

Related issues

Fixes STU-843

Proposed Changes

Applies a patch that removes only for Windows the field-sizing: content CSS from the SelectControl component as it does not work well on Windows

Windows	Before	After
Collapsed
Expanded

Testing Instructions

On Windows
Apply this branch and run npm install and npm start
On Studio, go to Sync tab and connect a site
Click on Push or Pull and on the modal, expand the All files and folders dropdown
Check that there is some padding on the right of both options
Repeat the steps on Mac
Check theres is no changes with production

Note

I have tried to also provide some extra padding to the bottom of the Specific files and folders option, but I have not found a simple way to do that (I have discarded using CSS selectors), and the impact is not as big as the right padding that this issue fixes

Pre-merge Checklist

Have you checked for TypeScript, React or other console errors?

bcotrim

LGTM 👍

katinthehatsite

The changes look good 👍

One question that I have is that when I was reviewing the issue, I noticed WordPress/gutenberg#72424 - do you think we should create a patch to the component instead and apply it in Studio so that we can fix all instances of the component usage? As a sidenote, I have not researched how much we are using this component, just asking this as a general question.

epeicher · 2025-10-30T10:31:11Z

One question that I have is that when I was reviewing the issue, I noticed WordPress/gutenberg#72424 - do you think we should create a patch to the component instead and apply it in Studio so that we can fix all instances of the component usage? As a sidenote, I have not researched how much we are using this component, just asking this as a general question.

That's a good point @katinthehatsite, and I think is what @wojtekn suggests in the linked task STU-843, that way, if there is a fix in the Gutenberg library, we just need to remove the patch and it will be automatically applied.

@wojtekn, do you think I should try to patch the component instead of the current fix that uses the isWindows() flag? I didn't consider the patch option when working on this yesterday.

…dio-sync-select-files-and-folders-menu-needs-right-margin

wojtekn · 2025-10-30T10:45:17Z

@epeicher, if it's getting fixed in Gutenberg, an NPM patch may be a good way. With that approach, we won't miss the change in mainstream as our patch will stop applying and will need to be removed.

github-actions · 2025-10-30T11:02:40Z

📊 Performance Test Results

Comparing 76ca49f vs trunk

site-editor

Metric	trunk	`76ca49f`	Diff	Change
load	10042.00 ms	12157.00 ms	+2115.00 ms	🔴 21.1%

site-startup

Metric	trunk	`76ca49f`	Diff	Change
siteCreation	19146.00 ms	19146.00 ms	0.00 ms	⚪ 0.0%
siteStartup	5966.00 ms	6004.00 ms	+38.00 ms	🔴 0.6%

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change

…dio-sync-select-files-and-folders-menu-needs-right-margin

epeicher · 2025-10-30T12:11:06Z

Hi @katinthehatsite, @wojtekn, I have applied the patch to the @wordpress/components npm package as part of d92d1a5 but that adds some extra padding to the arrow on the collapsed component on both Mac and Windows, please see the screenshots on the Description of the PR.

Could you please review them and let me know your view? I would be happy to revert to the previous version if we don't think the extra padding should be there on Mac.

katinthehatsite · 2025-10-31T08:57:31Z

Could you please review them and let me know your view? I would be happy to revert to the previous version if we don't think the extra padding should be there on Mac.

Hmm, if I were to be honest, I think it looked better before. Although I prefer the patch approach, I think user experience should be a priority and that gap is a bit 🫠

epeicher · 2025-10-31T11:57:30Z

Hmm, if I were to be honest, I think it looked better before. Although I prefer the patch approach, I think user experience should be a priority and that gap is a bit 🫠

@katinthehatsite, I totally agree. I managed to cover both requirements using a patch applied only on the affected platform, so it doesn’t impact the user experience elsewhere. The change is here 2d69ae5. I have updated the testing instructions and description to reflect this.

wojtekn · 2025-10-31T12:09:51Z

+   name: "1n00qi9-variantStyles",
+-  styles: "field-sizing:content;label:variantStyles;",
+  styles: isWindows ? "field-sizing:fixed;label:variantStyles;" : "field-sizing:content;label:variantStyles;",
+   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlbGVjdC1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4SVMiLCJmaWxlIjoic2VsZWN0LWNvbnRyb2wtc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIHJ0bCwgQ09ORklHIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi8uLi91dGlscy9zcGFjZSc7XG5pbXBvcnQgdHlwZSB7IFNlbGVjdENvbnRyb2xQcm9wcyB9IGZyb20gJy4uL3R5cGVzJztcbmltcG9ydCBJbnB1dENvbnRyb2xTdWZmaXhXcmFwcGVyIGZyb20gJy4uLy4uL2lucHV0LWNvbnRyb2wvaW5wdXQtc3VmZml4LXdyYXBwZXInO1xuaW1wb3J0IHsgZm9udFNpemVTdHlsZXMgfSBmcm9tICcuLi8uLi9pbnB1dC1jb250cm9sL3N0eWxlcy9pbnB1dC1jb250cm9sLXN0eWxlcyc7XG5pbXBvcnQgSW5wdXRCYXNlIGZyb20gJy4uLy4uL2lucHV0LWNvbnRyb2wvaW5wdXQtYmFzZSc7XG5cbmludGVyZmFjZSBTZWxlY3RQcm9wc1xuXHRleHRlbmRzIFBpY2s8XG5cdFx0U2VsZWN0Q29udHJvbFByb3BzLFxuXHRcdCdfX25leHQ0MHB4RGVmYXVsdFNpemUnIHwgJ2Rpc2FibGVkJyB8ICdtdWx0aXBsZScgfCAndmFyaWFudCdcblx0PiB7XG5cdC8vIFVzaW5nIGBzZWxlY3RTaXplYCBpbnN0ZWFkIG9mIGBzaXplYCB0byBhdm9pZCBhIHR5cGUgY29uZmxpY3Qgd2l0aCB0aGVcblx0Ly8gYHNpemVgIEhUTUwgYXR0cmlidXRlIG9mIHRoZSBgc2VsZWN0YCBlbGVtZW50LlxuXHRzZWxlY3RTaXplPzogU2VsZWN0Q29udHJvbFByb3BzWyAnc2l6ZScgXTtcbn1cblxuY29uc3QgZGlzYWJsZWRTdHlsZXMgPSAoIHsgZGlzYWJsZWQgfTogU2VsZWN0UHJvcHMgKSA9PiB7XG5cdGlmICggISBkaXNhYmxlZCApIHtcblx0XHRyZXR1cm4gJyc7XG5cdH1cblxuXHRyZXR1cm4gY3NzYFxuXHRcdGNvbG9yOiAkeyBDT0xPUlMudWkudGV4dERpc2FibGVkIH07XG5cdFx0Y3Vyc29yOiBkZWZhdWx0O1xuXHRgO1xufTtcblxuY29uc3QgaW5wdXRCYXNlVmFyaWFudFN0eWxlcyA9ICggeyB2YXJpYW50IH06IFNlbGVjdFByb3BzICkgPT4ge1xuXHRpZiAoIHZhcmlhbnQgPT09ICdtaW5pbWFsJyApIHtcblx0XHRyZXR1cm4gY3NzYFxuXHRcdFx0ZGlzcGxheTogaW5saW5lLWZsZXg7XG5cdFx0YDtcblx0fVxuXG5cdHJldHVybiAnJztcbn07XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbnB1dEJhc2UgPSBzdHlsZWQoIElucHV0QmFzZSApYFxuXHRjb2xvcjogJHsgQ09MT1JTLnRoZW1lLmZvcmVncm91bmQgfTtcblx0Y3Vyc29yOiBwb2ludGVyO1xuXG5cdCR7IGRpc2FibGVkU3R5bGVzIH1cblx0JHsgaW5wdXRCYXNlVmFyaWFudFN0eWxlcyB9XG5gO1xuXG5jb25zdCBzaXplU3R5bGVzID0gKCB7XG5cdF9fbmV4dDQwcHhEZWZhdWx0U2l6ZSxcblx0bXVsdGlwbGUsXG5cdHNlbGVjdFNpemUgPSAnZGVmYXVsdCcsXG59OiBTZWxlY3RQcm9wcyApID0+IHtcblx0aWYgKCBtdWx0aXBsZSApIHtcblx0XHQvLyBXaGVuIGBtdWx0aXBsZWAsIGp1c3QgdXNlIHRoZSBuYXRpdmUgYnJvd3NlciBzdHlsZXNcblx0XHQvLyB3aXRob3V0IHNldHRpbmcgZXhwbGljaXQgaGVpZ2h0LlxuXHRcdHJldHVybjtcblx0fVxuXG5cdGNvbnN0IHNpemVzID0ge1xuXHRcdGRlZmF1bHQ6IHtcblx0XHRcdGhlaWdodDogNDAsXG5cdFx0XHRtaW5IZWlnaHQ6IDQwLFxuXHRcdFx0cGFkZGluZ1RvcDogMCxcblx0XHRcdHBhZGRpbmdCb3R0b206IDAsXG5cdFx0fSxcblx0XHRzbWFsbDoge1xuXHRcdFx0aGVpZ2h0OiAyNCxcblx0XHRcdG1pbkhlaWdodDogMjQsXG5cdFx0XHRwYWRkaW5nVG9wOiAwLFxuXHRcdFx0cGFkZGluZ0JvdHRvbTogMCxcblx0XHR9LFxuXHRcdGNvbXBhY3Q6IHtcblx0XHRcdGhlaWdodDogMzIsXG5cdFx0XHRtaW5IZWlnaHQ6IDMyLFxuXHRcdFx0cGFkZGluZ1RvcDogMCxcblx0XHRcdHBhZGRpbmdCb3R0b206IDAsXG5cdFx0fSxcblx0XHQnX191bnN0YWJsZS1sYXJnZSc6IHtcblx0XHRcdGhlaWdodDogNDAsXG5cdFx0XHRtaW5IZWlnaHQ6IDQwLFxuXHRcdFx0cGFkZGluZ1RvcDogMCxcblx0XHRcdHBhZGRpbmdCb3R0b206IDAsXG5cdFx0fSxcblx0fTtcblxuXHRpZiAoICEgX19uZXh0NDBweERlZmF1bHRTaXplICkge1xuXHRcdHNpemVzLmRlZmF1bHQgPSBzaXplcy5jb21wYWN0O1xuXHR9XG5cblx0Y29uc3Qgc3R5bGUgPSBzaXplc1sgc2VsZWN0U2l6ZSBdIHx8IHNpemVzLmRlZmF1bHQ7XG5cblx0cmV0dXJuIGNzcyggc3R5bGUgKTtcbn07XG5cbmV4cG9ydCBjb25zdCBjaGV2cm9uSWNvblNpemUgPSAxODtcblxuY29uc3Qgc2l6ZVBhZGRpbmdzID0gKCB7XG5cdF9fbmV4dDQwcHhEZWZhdWx0U2l6ZSxcblx0bXVsdGlwbGUsXG5cdHNlbGVjdFNpemUgPSAnZGVmYXVsdCcsXG59OiBTZWxlY3RQcm9wcyApID0+IHtcblx0Y29uc3QgcGFkZGluZyA9IHtcblx0XHRkZWZhdWx0OiBDT05GSUcuY29udHJvbFBhZGRpbmdYLFxuXHRcdHNtYWxsOiBDT05GSUcuY29udHJvbFBhZGRpbmdYU21hbGwsXG5cdFx0Y29tcGFjdDogQ09ORklHLmNvbnRyb2xQYWRkaW5nWFNtYWxsLFxuXHRcdCdfX3Vuc3RhYmxlLWxhcmdlJzogQ09ORklHLmNvbnRyb2xQYWRkaW5nWCxcblx0fTtcblxuXHRpZiAoICEgX19uZXh0NDBweERlZmF1bHRTaXplICkge1xuXHRcdHBhZGRpbmcuZGVmYXVsdCA9IHBhZGRpbmcuY29tcGFjdDtcblx0fVxuXG5cdGNvbnN0IHNlbGVjdGVkUGFkZGluZyA9IHBhZGRpbmdbIHNlbGVjdFNpemUgXSB8fCBwYWRkaW5nLmRlZmF1bHQ7XG5cblx0cmV0dXJuIHJ0bCgge1xuXHRcdHBhZGRpbmdMZWZ0OiBzZWxlY3RlZFBhZGRpbmcsXG5cdFx0cGFkZGluZ1JpZ2h0OiBzZWxlY3RlZFBhZGRpbmcgKyBjaGV2cm9uSWNvblNpemUsXG5cdFx0Li4uKCBtdWx0aXBsZVxuXHRcdFx0PyB7XG5cdFx0XHRcdFx0cGFkZGluZ1RvcDogc2VsZWN0ZWRQYWRkaW5nLFxuXHRcdFx0XHRcdHBhZGRpbmdCb3R0b206IHNlbGVjdGVkUGFkZGluZyxcblx0XHRcdCAgfVxuXHRcdFx0OiB7fSApLFxuXHR9ICk7XG59O1xuXG5jb25zdCBvdmVyZmxvd1N0eWxlcyA9ICggeyBtdWx0aXBsZSB9OiBTZWxlY3RQcm9wcyApID0+IHtcblx0cmV0dXJuIHtcblx0XHRvdmVyZmxvdzogbXVsdGlwbGUgPyAnYXV0bycgOiAnaGlkZGVuJyxcblx0fTtcbn07XG5cbmNvbnN0IHZhcmlhbnRTdHlsZXMgPSAoIHsgdmFyaWFudCB9OiBTZWxlY3RQcm9wcyApID0+IHtcblx0aWYgKCB2YXJpYW50ID09PSAnbWluaW1hbCcgKSB7XG5cdFx0cmV0dXJuIGNzcygge1xuXHRcdFx0ZmllbGRTaXppbmc6ICdjb250ZW50Jyxcblx0XHR9ICk7XG5cdH1cblxuXHRyZXR1cm4gJyc7XG59O1xuXG4vLyBUT0RPOiBSZXNvbHZlIG5lZWQgdG8gdXNlICYmJiB0byBpbmNyZWFzZSBzcGVjaWZpY2l0eVxuLy8gaHR0cHM6Ly9naXRodWIuY29tL1dvcmRQcmVzcy9ndXRlbmJlcmcvaXNzdWVzLzE4NDgzXG5cbmV4cG9ydCBjb25zdCBTZWxlY3QgPSBzdHlsZWQuc2VsZWN0PCBTZWxlY3RQcm9wcyA+YFxuXHQmJiYge1xuXHRcdGFwcGVhcmFuY2U6IG5vbmU7XG5cdFx0YmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG5cdFx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0XHRib3JkZXI6IG5vbmU7XG5cdFx0Ym94LXNoYWRvdzogbm9uZSAhaW1wb3J0YW50O1xuXHRcdGNvbG9yOiBjdXJyZW50Q29sb3I7IC8vIE92ZXJyaWRlcyBob3Zlci9mb2N1cyBzdHlsZXMgaW4gZm9ybXMuY3NzXG5cdFx0Y3Vyc29yOiBpbmhlcml0O1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuXHRcdG1hcmdpbjogMDtcblx0XHR3aWR0aDogMTAwJTtcblx0XHRtYXgtd2lkdGg6IG5vbmU7XG5cdFx0d2hpdGUtc3BhY2U6IG5vd3JhcDtcblx0XHR0ZXh0LW92ZXJmbG93OiBlbGxpcHNpcztcblxuXHRcdCR7IGZvbnRTaXplU3R5bGVzIH07XG5cdFx0JHsgc2l6ZVN0eWxlcyB9O1xuXHRcdCR7IHNpemVQYWRkaW5ncyB9O1xuXHRcdCR7IG92ZXJmbG93U3R5bGVzIH1cblx0XHQkeyB2YXJpYW50U3R5bGVzIH1cblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IERvd25BcnJvd1dyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRtYXJnaW4taW5saW5lLWVuZDogJHsgc3BhY2UoIC0xICkgfTsgLy8gb3B0aWNhbGx5IGFkanVzdCB0aGUgaWNvblxuXHRsaW5lLWhlaWdodDogMDtcblxuXHRwYXRoIHtcblx0XHRmaWxsOiBjdXJyZW50Q29sb3I7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBJbnB1dENvbnRyb2xTdWZmaXhXcmFwcGVyV2l0aENsaWNrVGhyb3VnaCA9IHN0eWxlZChcblx0SW5wdXRDb250cm9sU3VmZml4V3JhcHBlclxuKWBcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHRwb2ludGVyLWV2ZW50czogbm9uZTtcblxuXHQkeyBydGwoIHsgcmlnaHQ6IDAgfSApIH1cbmA7XG4iXX0= */",


Any reason to add a source map with this patch?

That's done automatically by patch-package utility when generating the patch, I have tried to remove it manually but the patch fails to be applied in that case

epeicher added 2 commits October 29, 2025 16:53

Sync: Fix right padding on Windows for select files dropdown

c45a8d9

Apply fix only to Windows as it does not fail on Mac

b5f1943

epeicher requested a review from a team October 29, 2025 16:16

epeicher changed the title ~~Stu 843 studio sync select files and folders menu needs right margin~~ Oct 29, 2025

bcotrim approved these changes Oct 30, 2025

View reviewed changes

katinthehatsite approved these changes Oct 30, 2025

View reviewed changes

wojtekn assigned epeicher Oct 30, 2025

Merge branch 'trunk' of github.com:Automattic/studio into stu-843-stu…

03fb019

…dio-sync-select-files-and-folders-menu-needs-right-margin

epeicher added 3 commits October 30, 2025 12:28

Revert style changes in component as it will be applied as a patch

3ece4db

Merge branch 'trunk' of github.com:Automattic/studio into stu-843-stu…

8272008

…dio-sync-select-files-and-folders-menu-needs-right-margin

Fix the issue with a patch to the @wordpress/components package

d92d1a5

epeicher added 2 commits October 31, 2025 11:00

Apply the fix only to Windows

64108bf

Add fix to the build-module folder

2d69ae5

wojtekn reviewed Oct 31, 2025

View reviewed changes

epeicher merged commit 0ee36df into trunk Nov 5, 2025
15 checks passed

epeicher deleted the stu-843-studio-sync-select-files-and-folders-menu-needs-right-margin branch November 5, 2025 10:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Sync: Fix right padding on Windows for select files dropdown - #1966

Sync: Fix right padding on Windows for select files dropdown#1966
epeicher merged 8 commits into
trunkfrom
stu-843-studio-sync-select-files-and-folders-menu-needs-right-margin

epeicher commented Oct 29, 2025 •

edited

Loading

bcotrim left a comment

katinthehatsite left a comment •

edited

Loading

epeicher commented Oct 30, 2025

wojtekn commented Oct 30, 2025

github-actions Bot commented Oct 30, 2025 •

edited

Loading

epeicher commented Oct 30, 2025

katinthehatsite commented Oct 31, 2025

epeicher commented Oct 31, 2025 •

edited

Loading

wojtekn Oct 31, 2025

epeicher Oct 31, 2025 •

edited

Loading

Uh oh!

Labels

4 participants

Uh oh!

Conversation

epeicher commented Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related issues

Proposed Changes

Testing Instructions

Pre-merge Checklist

bcotrim left a comment

Choose a reason for hiding this comment

katinthehatsite left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

epeicher commented Oct 30, 2025

wojtekn commented Oct 30, 2025

github-actions Bot commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Performance Test Results

site-editor

site-startup

epeicher commented Oct 30, 2025

katinthehatsite commented Oct 31, 2025

epeicher commented Oct 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

wojtekn Oct 31, 2025

Choose a reason for hiding this comment

epeicher Oct 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Labels

4 participants

epeicher commented Oct 29, 2025 •

edited

Loading

katinthehatsite left a comment •

edited

Loading

github-actions Bot commented Oct 30, 2025 •

edited

Loading

epeicher commented Oct 31, 2025 •

edited

Loading

epeicher Oct 31, 2025 •

edited

Loading