Skip to content

Avatar Fills Width On Small Screen Resolution in Code Comment #20074

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
Closed
kdumontnu opened this issue Jun 21, 2022 · 0 comments · Fixed by #21461
Closed

Avatar Fills Width On Small Screen Resolution in Code Comment #20074

kdumontnu opened this issue Jun 21, 2022 · 0 comments · Fixed by #21461
Labels
topic/ui Change the appearance of the Gitea UI type/bug

Comments

@kdumontnu
Copy link
Contributor

Description

In inline PR comments (unsure if this is also found elsewhere), the user avatars will stretch to the full screen when the CSS snaps to "small" screen layout.

See: https://try.gitea.io/kdumontnu/test/pulls/2/files

Gitea Version

1.18.0+dev-17-gf6db650e9

Can you reproduce the bug on the Gitea demo site?

Yes

Log Gist

No response

Screenshots

image

Git Version

No response

Operating System

No response

How are you running Gitea?

try.gitea

Also occurs on 1.16.8

Database

No response
@kdumontnu kdumontnu added type/bug topic/ui Change the appearance of the Gitea UI topic/ui-interaction Change the process how users use Gitea instead of the visual appearance and removed topic/ui-interaction Change the process how users use Gitea instead of the visual appearance labels Jun 21, 2022
This was referenced Sep 15, 2022
Closed
Closed
Gusted pushed a commit to Gusted/gitea that referenced this issue Oct 14, 2022
Improve code comment review on mobile
6d90d8f 
- Fix placement of avatar image, this was not placed in the
`comment-header-left` and add CSS to cover the limiting of width+height of avatar for
code-review comment on "Files changed" page. This fixes the big
noticeable avatar issue.
- Apply `margin-bottom` to the "next" button, so it's consistent with
the "previous" button.
- Make sure the "next"/"previous" start at `flex-start` on mobile and
not off-screen at `flex-end`.
- Add `flex: 1` to the text, so the browser will nicely wrap the "XXX
commented XXX ago" text besides the avatar and make the header a bit
more compact, still not ideal.
- Resolves go-gitea#20074
@Gusted Gusted mentioned this issue Oct 14, 2022
Merged
lunny added a commit that referenced this issue Oct 25, 2022
@lunny @silverwind
Improve code comment review on mobile (#21461)
29c00eb 
- Fix placement of avatar image, this was not placed in the
`comment-header-left` and add CSS to cover the limiting of width+height
of avatar for code-review comment on "Files changed" page. This fixes
the big noticeable avatar issue.
- Apply `margin-bottom` to the "next" button, so it's consistent with
the "previous" button.
- Make sure the "next"/"previous" start at `flex-start` on mobile and
not off-screen at `flex-end`. As well force them to have `flex: 1` so
they won't overflow on x-asis. This also requires the `width: 100%` for
the `.ui.buttons` div.
- Resolves #20074


### Before
<details><img width="512"
src="https://user-images.githubusercontent.com/25481501/195952930-09560cad-419f-43a3-a8a4-a4166c117994.jpg"></details>

### After
<details><img width="512"
src="https://user-images.githubusercontent.com/25481501/197340081-0365dfa8-4344-46b4-8702-a40c778c073f.jpg"></details>

Co-authored-by: Lunny Xiao <[email protected]>
Co-authored-by: silverwind <[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 type/bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Improve code comment review on mobile Gusted/gitea
1 participant
@kdumontnu