Skip to content
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

Remove unnecessary scroll bars from specification tables #424

Merged
merged 1 commit into from
Sep 20, 2024

Conversation

gabalafou
Copy link
Contributor

Before

  • Unnecessary vertical scroll bars on the tables labeled "Requested packages" and "Channels"
  • Unnecessary horizontal scroll bar on "Requested packages" table

screenshot

After

No more unnecessary scroll bars.

screenshot

Copy link
Contributor Author

@gabalafou gabalafou left a comment

Choose a reason for hiding this comment

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

done self-reviewing

@@ -47,7 +47,7 @@ export const RequestedPackageList = ({
</StyledAccordionSummary>
<StyledAccordionDetails sx={{ padding: 0 }}>
<TableContainer>
<Table sx={{ width: "420px", tableLayout: "fixed" }}>
<Table sx={{ width: "100%", tableLayout: "fixed" }}>
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 think I previously thought that with table-layout: fixed, I needed to set a concrete width in pixels, but the MDN article on table-layout suggests that a percentage value for the width is fine. The key point is two-fold:

  1. Must set width to something (cannot leave unspecified)
  2. Except must not set width to auto

In order for the browser to respect table-layout: fixed and not use table-layout: auto instead.

@@ -15,8 +15,8 @@ export const StyledAccordionDetails = styled(AccordionDetails, {
? `1px solid ${palette.secondary.light}`
: "1px solid #BCBFC4",
borderTop: "none",
borderRadius: styleType === "grayscale" ? "0px 0px 5px 5px" : "Opx",
overflowY: "scroll",
borderRadius: styleType === "grayscale" ? "0px 0px 5px 5px" : "0px",
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The character on the left is not actually the zero numeral

borderRadius: styleType === "grayscale" ? "0px 0px 5px 5px" : "Opx",
overflowY: "scroll",
borderRadius: styleType === "grayscale" ? "0px 0px 5px 5px" : "0px",
overflowY: "auto",
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Don't show the vertical scroll bar unless there is actually overflow

@trallard trallard merged commit 8b902ec into conda-incubator:main Sep 20, 2024
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants