Fix UI for All Building Options Tab #17

New issue

Closed

opened 2026-06-10 09:02:57 +00:00 by gostmeaper · 1 comment

gostmeaper commented

2026-06-10 09:02:57 +00:00

(Migrated from codeberg.org)

Overall Objective

The UI for the All Building Options Tab has a number of UI issues and detachments from the Figma. This issue hopes to fix some of the issues in the UI before we start to match the UI to the Figma. The issues I've found are such:

The sidebar shouldn't have a scroll bar instead it should be fully displayed always.
When collapsing the sidebar the gray card with the symbols doesn't shrink vertically to fit the symbols only.
Add more whitespace on the right. When the sidebar is uncollapsed the see more button seems to shrink to fit on the page so much that it looks like it is cut off. Change it so that all the cards scale with whether the sidebar is collapsed or not.
When clicking on a building it doesn't automatically set the view to the top. Instead if you were to scroll down halfway and click on a dorm, the building details would also be scrolled halfway.

Suggested Approach

Take a look at the figma for any design problems/questions. Otherwise take a look at the /apps/frontend/src/app/building-options.

Help & Resources

### Overall Objective The UI for the All Building Options Tab has a number of UI issues and detachments from the Figma. This issue hopes to fix some of the issues in the UI before we start to match the UI to the Figma. The issues I've found are such: 1. The sidebar shouldn't have a scroll bar instead it should be fully displayed always. 2. When collapsing the sidebar the gray card with the symbols doesn't shrink vertically to fit the symbols only. 3. Add more whitespace on the right. When the sidebar is uncollapsed the see more button seems to shrink to fit on the page so much that it looks like it is cut off. Change it so that all the cards scale with whether the sidebar is collapsed or not. 4. When clicking on a building it doesn't automatically set the view to the top. Instead if you were to scroll down halfway and click on a dorm, the building details would also be scrolled halfway. ### Suggested Approach Take a look at the [figma](https://www.figma.com/design/jxjhX4m6xj4PSZOizoaXHd/CMU-Housing?node-id=616-17602&t=D950NfFsJ4n6hZUz-0) for any design problems/questions. Otherwise take a look at the /apps/frontend/src/app/building-options. ### Help & Resources - [README](../../ScottyLabs/housing/src/branch/main/README.md) - [Contributing Guidelines](../../ScottyLabs/housing/src/branch/main/docs/CONTRIBUTING.md)

EcstaticPilot commented

2026-06-17 00:23:08 +00:00

(Migrated from codeberg.org)

number 4 already fixed by pull request #23

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

ScottyLabs/housing#17

No description provided.

Rows
Columns