feat: make permutations sidebar and main menu sidebar responsive

[tiffanynwyeung]

Pull Request

Description

• permutations sidebar now changes into a fixed footer when screens are 992px < [screen resolution] < 1530px
• add new screen breakpoint at 1530px
• reduce the left padding on LayoutSider menu items: this may need a discussion. Basically, antd applies a single CSS class with extra left padding when there is only "one" item within a subitem menu, preventing any use of it being overridden even with inlineIndent prop. Due to the structure of our current menu items, antd views every single submenu option as "one" item and forces extra padding on it. Aside from removing the CSS class scoped exclusively for this purpose, the alternative would be fake-inserting extra phantom tags to wrap around each menu item instead of the <Flex>menu item contents like the icon + label</Flex> that is currently set up right now.

Related Issue

Resolves #303

Checklist

• [x] I have added commit messages that are descriptive and meaningful.
• [x] I have tested the changes locally.
• [x] I have reviewed the code changes.

Screenshots

Permanent fixed footer in action + reduced padding on menu items in main menu sidebar

Permutations sidebar/footer UI added to settings menu

[fribbels]

Nice! Testing it and its working pretty well.

To your point about the Sider's padding, it seems fine to me, I didn't notice a difference when playing around with it until I compared to a beta tab, so I doubt users would be too bothered.

Couple comments on the footer layout - I think the "permutations" number being missing is pretty important, since you might be locked into a 30 minute billion permutation search without realizing until its too late

Thoughts on something like this?

Also there seems to be some z-index funkiness going on in the grid. I remember I did some css on the z-index of the selected grid rows so we probably need to set the footer higher z than that

The breakpoint might be a few pixels too small. I'm getting a scrollbar before it breaks into the footer so there's a bunch of screen shifting at once

[tiffanynwyeung]

Couple comments on the footer layout - I think the "permutations" number being missing is pretty important, since you might be locked into a 30 minute billion permutation search without realizing until its too late Thoughts on something like this?

So I think it looks a little cluttered on the right hand side with all four buttons moved underneath Results, and the progress bar was very unnoticeable to me underneath the "Start Optimizer" button as the major CTA. I definitely don't mind re-adding permutations back in - maybe we can do something instead like moving Progress over to above the original Results column? We can also move the Stats view to the rightmost side as per your suggestion.

Also there seems to be some z-index funkiness going on in the grid. I remember I did some css on the z-index of the selected grid rows so we probably need to set the footer higher z than that

Noted, I'll fix that part 👍

The breakpoint might be a few pixels too small. I'm getting a scrollbar before it breaks into the footer so there's a bunch of screen shifting at once

The original plan I was hoping for was that, at that rough breakpoint, the Main Menu sidebar/Sider component would collapse on that breakpoint (while maintaining the ability for the user to uncollapse it, if they so choose) so the original Permutations sidebar could continue to be shown fully on the screen - only on the current breakpoint, where it's physically impossible to continue showing the permutations, would the footer be rendered. However, that would have to depend on https://github.com/ant-design/ant-design/issues/48884 being resolved.

So without the above behavior at the moment, I'm not too sure how users would feel being forcibly opted into a footer they may or may not like as a design choice, or even if they would rather opt back into scrolling over horizontally to the original sidebar to interact with it. Thus, I decided to choose the smallest possible breakpoint for it to render to 'minimize' the impact of this design change. Very open to more feedback about this though.

[fribbels]

Reviewed your code, and it looks good! Thank you for the idea and for following up with the implementation. The settings options are a nice touch for configurability