Summary

Make drop-down menus responsive to changing browser widths.

Review Request #14174 — Created Sept. 16, 2024 and submitted Sept. 18, 2024, 9:35 a.m.

Information

Owner

maubin

Repository

Ink

Branch

master

Bugs

Depends On

Reviewers

Groups

beanbag-misc

People

Description

Currently, drop-down menus (children on BaseMenuHandleView) could be cut
off depending on the size of the browser/screen. This change makes the
lateral positioning of the menu responsive so that the full width of the
menu is always visible on screen. If the menu element is being cut off
on the right, the entire menu is moved to the left so that it is on
screen. We also ensure that the menu width is never bigger than the
width of the window, and that the menu can't be cut off on the left.

Testing Done

Tested resizing the browser window in storybook, saw that the menus
in MenuButtonView and MenuLabelView positioned themselves correctly.

Commits

Summary	ID
Make drop-down menus responsive to changing browser widths. Currently, drop-down menus (children on BaseMenuHandleView) could be cut off depending on the size of the browser/screen. This change makes the lateral positioning of the menu responsive so that the full width of the menu is always visible on screen. If the menu element is being cut off on the right, the entire menu is moved to the left so that it is on screen. We also ensure that the menu width is never bigger than the width of the window, and that the menu can't be cut off on the left.	c8a19928df2f74c16327bca9ac6abe86e5f38819

Summary

Make drop-down menus responsive to changing browser widths.

Currently, drop-down menus (children on BaseMenuHandleView) could be cut off depending on the size of the browser/screen. This change makes the lateral positioning of the menu responsive so that the full width of the menu is always visible on screen. If the menu element is being cut off on the right, the entire menu is moved to the left so that it is on screen. We also ensure that the menu width is never bigger than the width of the window, and that the menu can't be cut off on the left.

c8a19928df2f74c16327bca9ac6abe86e5f38819

Files

Issues

Description	From	Last Updated
I think this would read cleaner if we assigned the value to a variable and then formatted it into the …	david	Sept. 18, 2024, 9:30 a.m.

flake8 passed.

JSHint passed.

Ship it!

```
Ship It!
```

src/ink/js/components/views/baseMenuHandleView.ts (Diff revision 1)

The issue has been resolved. Show all issues

I think this would read cleaner if we assigned the value to a variable and then formatted it into the string.

Commits:

	Summary	ID
	Make drop-down menus responsive to changing browser widths. Currently, drop-down menus (children on BaseMenuHandleView) could be cut off depending on the size of the browser/screen. This change makes the lateral positioning of the menu responsive so that the full width of the menu is always visible on screen. If the menu element is being cut off on the right, the entire menu is moved to the left so that it is on screen. We also ensure that the menu width is never bigger than the width of the window, and that the menu can't be cut off on the left.	79e9bd188a423f8112c9685d94e2561ac2f3824c
	Make drop-down menus responsive to changing browser widths. Currently, drop-down menus (children on BaseMenuHandleView) could be cut off depending on the size of the browser/screen. This change makes the lateral positioning of the menu responsive so that the full width of the menu is always visible on screen. If the menu element is being cut off on the right, the entire menu is moved to the left so that it is on screen. We also ensure that the menu width is never bigger than the width of the window, and that the menu can't be cut off on the left.	c8a19928df2f74c16327bca9ac6abe86e5f38819

Diff:

Revision 2 (+62 -4)

Show changes

src/ink/js/components/views/baseMenuHandleView.ts

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Ship it!

```
Ship It!
```

Status:: Completed
Change Summary:: Pushed to master (b458e89)