# Discourse Full-width component

**URL:** https://meta.discourse.org/t/discourse-full-width-component/292496
**Category:** Theme component
**Tags:** experimental
**Created:** [January 22, 2024, 12:02pm UTC](https://meta.discourse.org/t/discourse-full-width-component/292496 "2024-01-22T12:02:02Z")
**Posts on this page:** 15
**Page:** 1

<div class="post-metadata">

### Author: ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [January 22, 2024, 12:02pm UTC](https://meta.discourse.org/t/discourse-full-width-component/292496/1 "2024-01-22T12:02:02Z")

</div>

| | | |
| --- | --- | --- |
| ℹ | **Summary** | Make Discourse occupy the full browser width |
| 👓 | **Preview** | [preview](https://discourse.theme-creator.io/theme/chapoi/discourse-full-width) |
| 🛠 | **Repository** | [Full-width component](https://github.com/discourse/discourse-full-width-component) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

Install this theme component

* * *

⚠ This is still an experimental component, which overrides widgets, will most likely break with header refactors, and will not play well with other header components.

We’ll do our best to maintain this component and to minimise breaking changes, but we can’t guarantee these will never occur. A fix will most likely come, but you may have to wait a bit longer.

* * *

Example:

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/4/5/245b21450fa6d8b278688bcf162bfd630089d112.jpeg)

This component is currently also be used in the [Fully](https://meta.discourse.org/t/fully-a-full-width-discourse-theme/262833) and the “Default (full width)” theme here on Meta.

On very wide screens this might be less suitable.

---

<div class="post-metadata">

### Author: ![Gonerdot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gonerdot/32/366307_2.png) [@Gonerdot](https://meta.discourse.org/u/Gonerdot)
#### Post date: [March 4, 2024, 5:27pm UTC](https://meta.discourse.org/t/discourse-full-width-component/292496/4 "2024-03-04T17:27:15Z")

</div>

It would be cool if this component interacted with the right sidebar component and carried it as far to the right as possible for symmetry.

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/c/5/8c58b1c25078e630bb77e279feee52f7d015d8aa.jpeg)

---

<div class="post-metadata">

### Author: ![Diego\_Santos](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/diego_santos/32/362118_2.png) [@Diego\_Santos](https://meta.discourse.org/u/Diego_Santos)
#### Post date: [April 14, 2024, 4:23pm UTC](https://meta.discourse.org/t/discourse-full-width-component/292496/5 "2024-04-14T16:23:17Z")

</div>

I just updated to the latest version, and now I’m noticing an error on my screen

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

Discourse version: 3.3.0.beta1

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 14, 2024, 4:33pm UTC](https://meta.discourse.org/t/discourse-full-width-component/292496/6 "2024-04-14T16:33:27Z")

</div>

If you upgrade Discourse, that should fix your problem.

Three days ago, the component got an [update](https://github.com/discourse/discourse-full-width-component/commit/72baa305b0a72ac82208d9aac6197b2068caaead) that relies on a recent addition in Discourse core.

---

<div class="post-metadata">

### Author: ![Diego\_Santos](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/diego_santos/32/362118_2.png) [@Diego\_Santos](https://meta.discourse.org/u/Diego_Santos)
#### Post date: [April 17, 2024, 2:38am UTC](https://meta.discourse.org/t/discourse-full-width-component/292496/7 "2024-04-17T02:38:54Z")

</div>

You were right

---

<div class="post-metadata">

### Author: ![thaidb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thaidb/32/68488_2.png) [@thaidb](https://meta.discourse.org/u/thaidb)
#### Post date: [May 20, 2024, 2:32pm UTC](https://meta.discourse.org/t/discourse-full-width-component/292496/8 "2024-05-20T14:32:43Z")

</div>

Me too,  
I use [Fully Theme](https://meta.discourse.org/t/fully-a-full-width-discourse-theme/262833/61) and this Theme Componet, How can we expand Table Inserted Full Topic-page?  
Thank you!

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/d/e/5dee05b2d55e92fd567b4a789c0e6c781e8fb06e.png)

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [May 20, 2024, 3:14pm UTC](https://meta.discourse.org/t/discourse-full-width-component/292496/9 "2024-05-20T15:14:41Z")

</div>

You can try overwriting the CSS variables.

Create a theme component and attach it to Fully.  
In the `Color Definitions`, add and adjust the variables:

```css
:root {
    --topic-body-width: 100% !important; // 690px
    --d-max-width: 100% !important; // 1110px;
}

```

 ![image](https://global.discourse-cdn.com/meta/original/4X/c/8/8/c882df36c5ed562de444acacfe363541d25ea88e.png)

---

<div class="post-metadata">

### Author: ![thaidb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thaidb/32/68488_2.png) [@thaidb](https://meta.discourse.org/u/thaidb)
#### Post date: [May 20, 2024, 4:10pm UTC](https://meta.discourse.org/t/discourse-full-width-component/292496/10 "2024-05-20T16:10:17Z")

</div>

Success.Thank you so much 🙂

---

<div class="post-metadata">

### Author: ![Monikas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/monikas/32/375316_2.png) [@Monikas](https://meta.discourse.org/u/Monikas)
#### Post date: [June 3, 2024, 9:01pm UTC](https://meta.discourse.org/t/discourse-full-width-component/292496/11 "2024-06-03T21:01:21Z")

</div>

![image](https://global.discourse-cdn.com/meta/original/4X/8/e/1/8e103b34679a6462861c4177b265d3550dd2451d.jpeg)  
 ![image](https://global.discourse-cdn.com/meta/original/4X/8/d/2/8d25e5cf335bf5c6e3195779c06130c795fdfd01.jpeg)

> [@FKB Pro - Social theme](https://meta.discourse.org/t/fkb-pro-social-theme/234323):
>
> FKB Pro is a highly modified, detailed, professional social theme, but still user-friendly. rocketwarning This theme is quite sensitive and maybe not well compatible with other theme components or plugins you use! Please test it before use. These usually need some css modification. If you have any issue please report and will fix it. Layout On desktop: Three column layout. Sidebar ready On mobile:

Hopefully it will be compatible with this theme

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [June 25, 2024, 6:33pm UTC](https://meta.discourse.org/t/discourse-full-width-component/292496/12 "2024-06-25T18:33:57Z")

</div>

A post was split to a new topic: [Topic titles and excerpts appear in different font sizes](https://meta.discourse.org/t/topic-titles-and-excerpts-appear-in-different-font-sizes/313635)

---

<div class="post-metadata">

### Author: ![thaidb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thaidb/32/68488_2.png) [@thaidb](https://meta.discourse.org/u/thaidb)
#### Post date: [August 3, 2024, 6:27am UTC](https://meta.discourse.org/t/discourse-full-width-component/292496/13 "2024-08-03T06:27:27Z")

</div>

![image](https://global.discourse-cdn.com/meta/original/4X/0/0/e/00eabdc0bcae99456364a923c98b7136a6c767a1.png) ![image](https://global.discourse-cdn.com/meta/original/4X/f/2/7/f274708c5680988030bb71fbaa3c9194597ccecd.png)

Some category names are long and do not display fully in the sidebar.

How can we increase the width of the sidebar to match the length of the category name?

Thank you so much!

---

<div class="post-metadata">

### Author: ![sidt](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sidt/32/322778_2.png) [@sidt](https://meta.discourse.org/u/sidt)
#### Post date: [November 11, 2024, 1:30pm UTC](https://meta.discourse.org/t/discourse-full-width-component/292496/14 "2024-11-11T13:30:08Z")

</div>

Hi,

1. Is this component still experimental or fine to deploy in production environments ?

2. Is this component officially supported ?

Thanks!

---

<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: [November 12, 2024, 2:35pm UTC](https://meta.discourse.org/t/discourse-full-width-component/292496/16 "2024-11-12T14:35:22Z")

</div>

it’s officially supported in that we’ll look at bugs that are reported, but it’s still experimental in the sense that it’s not something we expect to work well with all themes and theme components

---

<div class="post-metadata">

### Author: ![loginerror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/loginerror/32/156605_2.png) [@loginerror](https://meta.discourse.org/u/loginerror)
#### Post date: [April 11, 2025, 8:30am UTC](https://meta.discourse.org/t/discourse-full-width-component/292496/17 "2025-04-11T08:30:01Z")

</div>

Given the announcement over [here](https://meta.discourse.org/t/bringing-popular-features-to-discourse-header-search-welcome-banner-and-category-icons-emoji/359169), I wanted to point out some discrepancies in experience when using the Full Width component and the header search feature.

[Safe Mode](https://meta.discourse.org/t/53504?silent=true):

[Safe Mode](https://meta.discourse.org/t/53504?silent=true) + Full Width component:

I assume at least the same experience should be the case, if not simply collapsing the header search to an icon for very low page widths (like on the mobile view).

---

<div class="post-metadata">

### Author: ![lindsey](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lindsey/32/318210_2.png) [@lindsey](https://meta.discourse.org/u/lindsey)
#### Post date: [April 11, 2025, 6:01pm UTC](https://meta.discourse.org/t/discourse-full-width-component/292496/18 "2025-04-11T18:01:16Z")

</div>

We just recently merged a fix to ensure the header search bar collapses to the icon on small screen widths. Once you’ve updated Discourse, could you please take a look and let us know if that’s looking better?
