# CSS issue: Topic header and post editor buttons getting off screen

**URL:** https://meta.discourse.org/t/css-issue-topic-header-and-post-editor-buttons-getting-off-screen/253757
**Category:** UX
**Created:** [February 1, 2023, 9:36pm UTC](https://meta.discourse.org/t/css-issue-topic-header-and-post-editor-buttons-getting-off-screen/253757 "2023-02-01T21:36:17Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![jesus2099](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jesus2099/32/119720_2.png) [@jesus2099](https://meta.discourse.org/u/jesus2099)
#### Post date: [February 1, 2023, 9:36pm UTC](https://meta.discourse.org/t/css-issue-topic-header-and-post-editor-buttons-getting-off-screen/253757/1 "2023-02-01T21:36:17Z")

</div>

> [@Zas](#):
>
> From 2.8.14 to 3.1.0.beta2

> **[Forums are about to be migrated to new server](https://community.metabrainz.org/t/forums-are-about-to-be-migrated-to-new-server/621814/6?u=jesus2099)**
>
> From 2.8.14 to 3.1.0.beta2

After this upgrade, the topic header started going off screen when I scroll topic content down.  
Same for post editor being partially off screen unless I scroll up.

Android 9 Kiwi browser.

 ![IMG_20230201_222950](https://global.discourse-cdn.com/meta/original/4X/f/0/7/f0736090407df77dbb5740edb204892dec13151c.jpeg)  
 ![IMG_20230201_223007](https://global.discourse-cdn.com/meta/original/4X/1/7/0/1700e3131219809093799fc358e4f488c693247f.jpeg)

Do you know what could have happened?  
It looks like a CSS issue.  
There is no problem here in meta.  
Maybe a specific `3.1.0.beta2` bug?

In fact the whole site is slightly zoomed in.  
But even if I zoom out fully, the described issues are still there (on MetaBrainz Discourse).

I tried with the default Light Theme.  
At first it seemed fixed but no, same problems in topics.

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [February 1, 2023, 9:46pm UTC](https://meta.discourse.org/t/css-issue-topic-header-and-post-editor-buttons-getting-off-screen/253757/2 "2023-02-01T21:46:40Z")

</div>

> [@jesus2099](#):
>
> Android 9 Kiwi browser.

Does the same happens on Chrome?

Can you record a video of the problem or even a screenshot?

---

<div class="post-metadata">

### Author: ![jesus2099](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jesus2099/32/119720_2.png) [@jesus2099](https://meta.discourse.org/u/jesus2099)
#### Post date: [February 1, 2023, 10:00pm UTC](https://meta.discourse.org/t/css-issue-topic-header-and-post-editor-buttons-getting-off-screen/253757/3 "2023-02-01T22:00:20Z")

</div>

Thank you @Falco.  
Actually, the problem stopped for me, now!?

Some old CSS and/or JavaScript must have put some time to update in my browser cache!

I’ll say here if it comes back, but I don’t think so.

I forgot to paste my screenshots in OP!  
I add them now, for the record.

---

<div class="post-metadata">

### Author: ![jesus2099](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jesus2099/32/119720_2.png) [@jesus2099](https://meta.discourse.org/u/jesus2099)
#### Post date: [February 2, 2023, 3:42pm UTC](https://meta.discourse.org/t/css-issue-topic-header-and-post-editor-buttons-getting-off-screen/253757/4 "2023-02-02T15:42:03Z")

</div>

Oh no, small zoom in still happens and also header and post edit buttons off screen. 🤔 And not on meta.

I will test with Chrome as soon as I have time and enough space to update the obsolete pre-installed version.

---

<div class="post-metadata">

### Author: ![jesus2099](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jesus2099/32/119720_2.png) [@jesus2099](https://meta.discourse.org/u/jesus2099)
#### Post date: [February 2, 2023, 4:54pm UTC](https://meta.discourse.org/t/css-issue-topic-header-and-post-editor-buttons-getting-off-screen/253757/5 "2023-02-02T16:54:46Z")

</div>

No problem on [try](https://try.discourse.org/t/whats-your-all-time-favorite-movie-scene/264) either, apparently…

---

<div class="post-metadata">

### Author: ![jesus2099](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jesus2099/32/119720_2.png) [@jesus2099](https://meta.discourse.org/u/jesus2099)
#### Post date: [February 2, 2023, 7:18pm UTC](https://meta.discourse.org/t/css-issue-topic-header-and-post-editor-buttons-getting-off-screen/253757/6 "2023-02-02T19:18:53Z")

</div>

I have updated Chrome to latest version (109.0.5414.117).

The same problems still occur on [MetaBrainz since upgrade from 2.8.14 to 3.1.0.beta2 and server change](https://community.metabrainz.org/t/forums-are-about-to-be-migrated-to-new-server/621814?u=jesus2099) but still not on [try](https://try.discourse.org/t/whats-your-all-time-favorite-movie-scene/264) and not here on [meta](https://meta.discourse.org/t/css-issue-topic-header-and-post-editor-buttons-getting-off-screen/253757):

- slight zoom in
- dynamic header and footer buttons go off screen when scrolling

See top and bottom of the header and buttons that go off screen.

See at the end, I zoom out fully.  
Then things are more fixed but it shows that it’s some out, as the header is not going all the way to the right border.

Maybe the problem is that the header is narrower than the page background?

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [February 2, 2023, 7:52pm UTC](https://meta.discourse.org/t/css-issue-topic-header-and-post-editor-buttons-getting-off-screen/253757/7 "2023-02-02T19:52:12Z")

</div>

> [@jesus2099](#):
>
> The same problems still occur on [MetaBrainz since upgrade from 2.8.14 to 3.1.0.beta2 and server change](https://community.metabrainz.org/t/forums-are-about-to-be-migrated-to-new-server/621814?u=jesus2099) but still not on [try](https://try.discourse.org/t/whats-your-all-time-favorite-movie-scene/264) and not here on [meta](https://meta.discourse.org/t/css-issue-topic-header-and-post-editor-buttons-getting-off-screen/253757):

If it only occurs on that site and neither on try nor meta it means it’s a theme bug. Can you try reproducing it on that site while on [Safe Mode](https://meta.discourse.org/t/53504?silent=true) ?

---

<div class="post-metadata">

### Author: ![jesus2099](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jesus2099/32/119720_2.png) [@jesus2099](https://meta.discourse.org/u/jesus2099)
#### Post date: [February 2, 2023, 7:56pm UTC](https://meta.discourse.org/t/css-issue-topic-header-and-post-editor-buttons-getting-off-screen/253757/8 "2023-02-02T19:56:24Z")

</div>

Wow, great hidden feature!

Same problems in any topics when in [MetaBrainz safe mode](https://community.metabrainz.org/safe-mode) with all 3 things disabled.

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [February 2, 2023, 7:58pm UTC](https://meta.discourse.org/t/css-issue-topic-header-and-post-editor-buttons-getting-off-screen/253757/9 "2023-02-02T19:58:46Z")

</div>

Hello, I think the side overflow cause by the long tags on suggested topics. It pushes the date off screen.

 ![Screenshot_20230202_205639](https://global.discourse-cdn.com/meta/original/4X/c/3/3/c337f4162ea5fbb2a8ff4e7001b4aa45bf698d81.jpeg)

---

<div class="post-metadata">

### Author: ![jesus2099](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jesus2099/32/119720_2.png) [@jesus2099](https://meta.discourse.org/u/jesus2099)
#### Post date: [February 2, 2023, 9:42pm UTC](https://meta.discourse.org/t/css-issue-topic-header-and-post-editor-buttons-getting-off-screen/253757/10 "2023-02-02T21:42:46Z")

</div>

Wow, it seems like you nailed it, @Don!

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [February 2, 2023, 9:49pm UTC](https://meta.discourse.org/t/css-issue-topic-header-and-post-editor-buttons-getting-off-screen/253757/11 "2023-02-02T21:49:25Z")

</div>

Moving it to #Contribute > UX, nice catch @Don

---

<div class="post-metadata">

### Author: ![jesus2099](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jesus2099/32/119720_2.png) [@jesus2099](https://meta.discourse.org/u/jesus2099)
#### Post date: [February 2, 2023, 10:00pm UTC](https://meta.discourse.org/t/css-issue-topic-header-and-post-editor-buttons-getting-off-screen/253757/13 "2023-02-02T22:00:11Z")

</div>

Indeed, when by chance the suggested topics have no overlong tags, no problems:

 ![Screenshot_2023-02-02-22-58-26-356_com.kiwibrowser.browser](https://global.discourse-cdn.com/meta/original/4X/7/5/9/759c14f222eb9cc8561ee43f98962e8d8d0a94cd.jpeg)

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [February 6, 2023, 10:31pm UTC](https://meta.discourse.org/t/css-issue-topic-header-and-post-editor-buttons-getting-off-screen/253757/16 "2023-02-06T22:31:53Z")

</div>

I’ve got a PR in the works that will allow tags to wrap under the category name, hoping this will solve the issue:

[https://github.com/discourse/discourse/pull/20187](https://github.com/discourse/discourse/pull/20187)

 ![image](https://global.discourse-cdn.com/meta/original/4X/6/f/f/6ff81cbf2b7376eacf11294010c897f9dbcda05b.png)
