Skip to content

chore(github): Changes the max-width to absolute value to eliminate excess whitespace #93247

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jun 13, 2025

Conversation

Christinarlong
Copy link
Contributor

@Christinarlong Christinarlong commented Jun 10, 2025

Instead changes the max-width to absolute value to eliminate excess whitespace - credit to leander 🙏

small screen
image

normal screen
image

@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Jun 10, 2025
@Christinarlong Christinarlong marked this pull request as ready for review June 10, 2025 17:29
@Christinarlong Christinarlong requested a review from a team June 10, 2025 17:29
Copy link

codecov bot commented Jun 10, 2025

❌ 4 Tests Failed:

Tests completed Failed Passed Skipped
10542 4 10538 9
View the top 3 failed test(s) by shortest run time
GithubInstallationSelect redirects to setup page when selecting "skip"(integrate with a new GH org) option
Stack Traces | 0.059s run time
Error: Expected test not to call console.error().

If the error is expected, test for it explicitly by mocking it out using jest.spyOn(console, 'error').mockImplementation() and test that the warning occurs.

An update to Control inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at https://react.dev/link/wrap-tests-with-act
    at console.captureMessage [as error] (.../sentry/node_modules/.pnpm/[email protected]..../node_modules/jest-fail-on-console/index.js:83:25)
    at .../sentry/node_modules/.pnpm/[email protected][email protected]..../react-dom/cjs/react-dom-client.development.js:16023:19
    at runWithFiberInDEV (.../sentry/node_modules/.pnpm/[email protected][email protected]..../react-dom/cjs/react-dom-client.development.js:1522:13)
    at warnIfUpdatesNotWrappedWithActDEV (.../sentry/node_modules/.pnpm/[email protected][email protected]..../react-dom/cjs/react-dom-client.development.js:16022:9)
    at scheduleUpdateOnFiber (.../sentry/node_modules/.pnpm/[email protected][email protected]..../react-dom/cjs/react-dom-client.development.js:14396:11)
    at dispatchSetStateInternal (.../sentry/node_modules/.pnpm/[email protected][email protected]..../react-dom/cjs/react-dom-client.development.js:6969:13)
    at dispatchSetState (.../sentry/node_modules/.pnpm/[email protected][email protected]..../react-dom/cjs/react-dom-client.development.js:6927:7)
    at .../sentry/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]..../lib/cjs/usePopper.js:64:11
    at Object.<anonymous>.process.env.NODE_ENV.exports.flushSync (.../sentry/node_modules/.pnpm/[email protected][email protected]..../react-dom/cjs/react-dom.development.js:136:18)
    at fn (.../sentry/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]..../lib/cjs/usePopper.js:63:18)
    at Object.fn [as forceUpdate] (.../sentry/node_modules/.pnpm/@[email protected]/node_modules/@.../core/src/createPopper.js:235:21)
    at forceUpdate (.../sentry/node_modules/.pnpm/@[email protected]/node_modules/@.../core/src/createPopper.js:245:22)
    at new Promise (<anonymous>)
    at .../sentry/node_modules/.pnpm/@[email protected]/node_modules/@.../core/src/createPopper.js:244:11
    at fn (.../sentry/node_modules/.pnpm/@[email protected]/node_modules/@.../src/utils/debounce.js:10:19)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)
    at flushUnexpectedConsoleCalls (.../sentry/node_modules/.pnpm/[email protected]..../node_modules/jest-fail-on-console/index.js:48:13)
    at Object.<anonymous> (.../sentry/node_modules/.pnpm/[email protected]..../node_modules/jest-fail-on-console/index.js:139:7)
    at Promise.then.completed (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/utils.js:231:10)
    at _callCircusHook (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/run.js:281:40)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)
    at _runTest (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/run.js:254:5)
    at _runTestsForDescribeBlock (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/run.js:126:9)
    at _runTestsForDescribeBlock (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/run.js:121:9)
    at run (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/run.js:71:3)
    at runAndTransformResultsToJestFormat (.../sentry/node_modules/.pnpm/[email protected][email protected]..../build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at jestAdapter (.../sentry/node_modules/.pnpm/[email protected][email protected]..../build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at runTestInternal (.../sentry/node_modules/.pnpm/[email protected]..../jest-runner/build/runTest.js:367:16)
    at runTest (.../sentry/node_modules/.pnpm/[email protected]..../jest-runner/build/runTest.js:444:34)
    at Object.worker (.../sentry/node_modules/.pnpm/[email protected]..../jest-runner/build/testWorker.js:106:12)
GithubInstallationSelect redirects to setup page when clicking Install
Stack Traces | 0.071s run time
Error: Expected test not to call console.error().

If the error is expected, test for it explicitly by mocking it out using jest.spyOn(console, 'error').mockImplementation() and test that the warning occurs.

An update to Control inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at https://react.dev/link/wrap-tests-with-act
    at console.captureMessage [as error] (.../sentry/node_modules/.pnpm/[email protected]..../node_modules/jest-fail-on-console/index.js:83:25)
    at .../sentry/node_modules/.pnpm/[email protected][email protected]..../react-dom/cjs/react-dom-client.development.js:16023:19
    at runWithFiberInDEV (.../sentry/node_modules/.pnpm/[email protected][email protected]..../react-dom/cjs/react-dom-client.development.js:1522:13)
    at warnIfUpdatesNotWrappedWithActDEV (.../sentry/node_modules/.pnpm/[email protected][email protected]..../react-dom/cjs/react-dom-client.development.js:16022:9)
    at scheduleUpdateOnFiber (.../sentry/node_modules/.pnpm/[email protected][email protected]..../react-dom/cjs/react-dom-client.development.js:14396:11)
    at dispatchSetStateInternal (.../sentry/node_modules/.pnpm/[email protected][email protected]..../react-dom/cjs/react-dom-client.development.js:6969:13)
    at dispatchSetState (.../sentry/node_modules/.pnpm/[email protected][email protected]..../react-dom/cjs/react-dom-client.development.js:6927:7)
    at .../sentry/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]..../lib/cjs/usePopper.js:64:11
    at Object.<anonymous>.process.env.NODE_ENV.exports.flushSync (.../sentry/node_modules/.pnpm/[email protected][email protected]..../react-dom/cjs/react-dom.development.js:136:18)
    at fn (.../sentry/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]..../lib/cjs/usePopper.js:63:18)
    at Object.fn [as forceUpdate] (.../sentry/node_modules/.pnpm/@[email protected]/node_modules/@.../core/src/createPopper.js:235:21)
    at forceUpdate (.../sentry/node_modules/.pnpm/@[email protected]/node_modules/@.../core/src/createPopper.js:245:22)
    at new Promise (<anonymous>)
    at .../sentry/node_modules/.pnpm/@[email protected]/node_modules/@.../core/src/createPopper.js:244:11
    at fn (.../sentry/node_modules/.pnpm/@[email protected]/node_modules/@.../src/utils/debounce.js:10:19)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)
    at flushUnexpectedConsoleCalls (.../sentry/node_modules/.pnpm/[email protected]..../node_modules/jest-fail-on-console/index.js:48:13)
    at Object.<anonymous> (.../sentry/node_modules/.pnpm/[email protected]..../node_modules/jest-fail-on-console/index.js:139:7)
    at Promise.then.completed (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/utils.js:231:10)
    at _callCircusHook (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/run.js:281:40)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)
    at _runTest (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/run.js:254:5)
    at _runTestsForDescribeBlock (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/run.js:126:9)
    at _runTestsForDescribeBlock (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/run.js:121:9)
    at run (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/run.js:71:3)
    at runAndTransformResultsToJestFormat (.../sentry/node_modules/.pnpm/[email protected][email protected]..../build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at jestAdapter (.../sentry/node_modules/.pnpm/[email protected][email protected]..../build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at runTestInternal (.../sentry/node_modules/.pnpm/[email protected]..../jest-runner/build/runTest.js:367:16)
    at runTest (.../sentry/node_modules/.pnpm/[email protected]..../jest-runner/build/runTest.js:444:34)
    at Object.worker (.../sentry/node_modules/.pnpm/[email protected]..../jest-runner/build/testWorker.js:106:12)
GithubInstallationSelect renders the upsell if user is not on biz plan
Stack Traces | 0.115s run time
Error: Expected test not to call console.error().

If the error is expected, test for it explicitly by mocking it out using jest.spyOn(console, 'error').mockImplementation() and test that the warning occurs.

An update to Control inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at https://react.dev/link/wrap-tests-with-act
    at console.captureMessage [as error] (.../sentry/node_modules/.pnpm/[email protected]..../node_modules/jest-fail-on-console/index.js:83:25)
    at .../sentry/node_modules/.pnpm/[email protected][email protected]..../react-dom/cjs/react-dom-client.development.js:16023:19
    at runWithFiberInDEV (.../sentry/node_modules/.pnpm/[email protected][email protected]..../react-dom/cjs/react-dom-client.development.js:1522:13)
    at warnIfUpdatesNotWrappedWithActDEV (.../sentry/node_modules/.pnpm/[email protected][email protected]..../react-dom/cjs/react-dom-client.development.js:16022:9)
    at scheduleUpdateOnFiber (.../sentry/node_modules/.pnpm/[email protected][email protected]..../react-dom/cjs/react-dom-client.development.js:14396:11)
    at dispatchSetStateInternal (.../sentry/node_modules/.pnpm/[email protected][email protected]..../react-dom/cjs/react-dom-client.development.js:6969:13)
    at dispatchSetState (.../sentry/node_modules/.pnpm/[email protected][email protected]..../react-dom/cjs/react-dom-client.development.js:6927:7)
    at .../sentry/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]..../lib/cjs/usePopper.js:64:11
    at Object.<anonymous>.process.env.NODE_ENV.exports.flushSync (.../sentry/node_modules/.pnpm/[email protected][email protected]..../react-dom/cjs/react-dom.development.js:136:18)
    at fn (.../sentry/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]..../lib/cjs/usePopper.js:63:18)
    at Object.fn [as forceUpdate] (.../sentry/node_modules/.pnpm/@[email protected]/node_modules/@.../core/src/createPopper.js:235:21)
    at forceUpdate (.../sentry/node_modules/.pnpm/@[email protected]/node_modules/@.../core/src/createPopper.js:245:22)
    at new Promise (<anonymous>)
    at .../sentry/node_modules/.pnpm/@[email protected]/node_modules/@.../core/src/createPopper.js:244:11
    at fn (.../sentry/node_modules/.pnpm/@[email protected]/node_modules/@.../src/utils/debounce.js:10:19)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)
    at flushUnexpectedConsoleCalls (.../sentry/node_modules/.pnpm/[email protected]..../node_modules/jest-fail-on-console/index.js:48:13)
    at Object.<anonymous> (.../sentry/node_modules/.pnpm/[email protected]..../node_modules/jest-fail-on-console/index.js:139:7)
    at Promise.then.completed (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/utils.js:231:10)
    at _callCircusHook (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/run.js:281:40)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)
    at _runTest (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/run.js:254:5)
    at _runTestsForDescribeBlock (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/run.js:126:9)
    at _runTestsForDescribeBlock (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/run.js:121:9)
    at run (.../sentry/node_modules/.pnpm/[email protected][email protected]..../jest-circus/build/run.js:71:3)
    at runAndTransformResultsToJestFormat (.../sentry/node_modules/.pnpm/[email protected][email protected]..../build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at jestAdapter (.../sentry/node_modules/.pnpm/[email protected][email protected]..../build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at runTestInternal (.../sentry/node_modules/.pnpm/[email protected]..../jest-runner/build/runTest.js:367:16)
    at runTest (.../sentry/node_modules/.pnpm/[email protected]..../jest-runner/build/runTest.js:444:34)
    at Object.worker (.../sentry/node_modules/.pnpm/[email protected]..../jest-runner/build/testWorker.js:106:12)

To view more test analytics, go to the Test Analytics Dashboard
📋 Got 3 mins? Take this short survey to help us improve Test Analytics.

Comment on lines 251 to 265
const FullText = styled('span')`
display: inline;

@media (max-width: 768px) {
display: none;
}
`;

const ShortText = styled('span')`
display: none;

@media (max-width: 768px) {
display: inline;
}
`;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't a great UX, especially since from the screenshot there is a huge amount of whitespace on either side. Dropdowns are already overlays so a tooltip on top is pretty unexpected.

The better solution IMO would be to remove max-width: 33px from StyledContainer and replace it with an actual px value. LMK if that fixes the issue, if not we can work through it together.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just tried and damn yeah it looks so much better 😭

@Christinarlong Christinarlong changed the title chore(github): Add ... for small screens chore(github): Changes the max-width to absolute value to eliminate excess whitespace Jun 13, 2025
@Christinarlong Christinarlong requested a review from leeandher June 13, 2025 17:14
@Christinarlong Christinarlong merged commit 8f8f5be into master Jun 13, 2025
47 checks passed
@Christinarlong Christinarlong deleted the crl/github-casing branch June 13, 2025 17:50
billyvg pushed a commit that referenced this pull request Jun 18, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Scope: Frontend Automatically applied to PRs that change frontend components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants