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.

Sign up for GitHub

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

Jump to bottom

Buggy CSS when browsers are not maximised, needs more wrap-around #13671

Closed
2 of 6 tasks
Evrey opened this issue Nov 22, 2020 · 6 comments · Fixed by #20602
Closed
2 of 6 tasks

Buggy CSS when browsers are not maximised, needs more wrap-around #13671

Evrey opened this issue Nov 22, 2020 · 6 comments · Fixed by #20602
Labels
topic/ui Change the appearance of the Gitea UI

Comments

@Evrey
Copy link

Evrey commented Nov 22, 2020

  • Gitea version (or commit ref): 1.14.0+dev-215-gd025d84d9, official docker image
  • Git version: (irrelevant)
  • Operating system: (irrelevant)
  • Database (use [x]):
    • PostgreSQL
    • MySQL
    • MSSQL
    • SQLite
  • Can you reproduce the bug at https://try.gitea.io:
    • Yes (Screenshot below)
    • No
  • Log gist: (irrelevant)

Description

Many websites falsely assume that people run their browsers maximised, taking the entire available monitor area for themselves. I am one of these people who instead tile their browser window, making it take up only half a motinor column. The resolution of the monitor in question is 1080p.

The fix is to make all horizontal flexboxes wrap around once the window width is reached.

Screenshots

All screenshots made at the same resolution. You can see a bit of my desktop background on some of them, and the next monitor to the right.

Bildschirmfoto_2020-11-22_12-59-54
Bildschirmfoto_2020-11-22_13-04-17
Bildschirmfoto_2020-11-22_13-04-39
Bildschirmfoto_2020-11-22_13-11-31
@wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf
Copy link
Contributor

I second this, also noticed it.

@silverwind
Copy link
Member

Need to switch that to two-row layout on small screens like it's already done for PR review toolbar, e.g. https://try.gitea.io/silverwind/symlink-test/pulls/8/files.

@Evrey
Copy link
Author

Evrey commented Dec 11, 2020

Addendum:

Horizontal scroll bars are needed for tables, such as the user table in the admin area.

@edgar-bonet
Copy link

This issue has become more obvious with the extra buttons brought by 1.17.0. Now I experience a broken layout for all window widths in the range 768px–1199px, both on Firefox and Chromium.

@silverwind
Copy link
Member

Yes, agree there is too many buttons already. #20375 will remove one of them.

@silverwind silverwind mentioned this issue Aug 1, 2022
Merged
@silverwind
Copy link
Member

#20602 will consolidate a few more.

silverwind added a commit to silverwind/gitea that referenced this issue Aug 2, 2022
@silverwind
Rework repo buttons
6066d19 
- Replace "New PR" and "Go to File" button with Icon Button
- Move all "Add File" actions into a dropdown button
- Remove most custom styling of clone buttons

Buttons are now all equal height, mobile layout wraps gracefully.

Fixes: go-gitea#13671
Replaces: go-gitea#20375
@lafriks lafriks added the topic/ui Change the appearance of the Gitea UI label Aug 3, 2022
@lafriks lafriks closed this as completed in abdebd2 Aug 7, 2022
silverwind added a commit to silverwind/gitea that referenced this issue Aug 8, 2022
@silverwind @lafriks
@zeripath @lunny
Rework repo buttons (go-gitea#20602)
cb627f7 
* Rework repo buttons

- Replace "New PR" and "Go to File" button with Icon Button
- Move all "Add File" actions into a dropdown button
- Remove most custom styling of clone buttons
- Margin and wiki tweaks

Buttons are now all equal height, mobile layout wraps gracefully.

Fixes: go-gitea#13671
Replaces: go-gitea#20375

Co-authored-by: Lauris BH <[email protected]>
Co-authored-by: zeripath <[email protected]>
Co-authored-by: Lunny Xiao <[email protected]>
vsysoev pushed a commit to IntegraSDL/gitea that referenced this issue Aug 10, 2022
@silverwind @lafriks
@zeripath @lunny
Rework repo buttons (go-gitea#20602)
264b7c5 
* Rework repo buttons

- Replace "New PR" and "Go to File" button with Icon Button
- Move all "Add File" actions into a dropdown button
- Remove most custom styling of clone buttons
- Margin and wiki tweaks

Buttons are now all equal height, mobile layout wraps gracefully.

Fixes: go-gitea#13671
Replaces: go-gitea#20375

Co-authored-by: Lauris BH <[email protected]>
Co-authored-by: zeripath <[email protected]>
Co-authored-by: Lunny Xiao <[email protected]>
zeripath pushed a commit that referenced this issue Aug 20, 2022
@silverwind @wxiaoguang
Rework repo buttons (#20602, #20718) (#20719)
c61ed6f 
* Rework repo buttons (#20602)

* Rework repo buttons

- Replace "New PR" and "Go to File" button with Icon Button
- Move all "Add File" actions into a dropdown button
- Remove most custom styling of clone buttons
- Margin and wiki tweaks

Buttons are now all equal height, mobile layout wraps gracefully.

Fixes: #13671
Replaces: #20375

* Restore history button and hide add button when unable to add (#20718)

Fix two regressions from #20602:

- Restore the 'History' button that was previously unable to render
  because it's show condition was never hit
- Hide the 'Add File' button when there would be no items in the
  dropdown.

Co-authored-by: wxiaoguang <[email protected]>
@go-gitea go-gitea locked and limited conversation to collaborators May 3, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
topic/ui Change the appearance of the Gitea UI
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Rework repo buttons silverwind/gitea
5 participants
@silverwind @lafriks @Evrey @edgar-bonet @wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf