Option to constrain container width

[stpaultim]

I like GIN a lot, but I don't like the fact that it spreads out to utilize the entire width of my monitor. I'd love the option to limit the content width of gin. Either a couple of width options or the ability to set max-width myself.

I image that the width is mostly a feature, but I would rather narrow it a little. Here are sceenshots demonstrating how much wider it is in GIN for me than it was in Seven.

[laryn]

Thanks @stpaultim -- I think @olafgrabienski has maybe suggested something similar at one point. I'm of two minds on this. One mind agrees with adding this as an option in the Gin settings. The other mind (which is where I'm leaning at the moment) suggests a few additional tweaks in the layout template overrides in the Gin theme and leave this to people to configure in the default admin layout. For example, a slight tweak to shrink the sidebars to 2 columns in Harris would yield this:

I put that tweak into a PR -- care to test and let me know how that feels as a potential solution?

[stpaultim]

So, I tested the PR and yes it works as you described and I think it's a potential solution.

In my ideal case, I think I'd make it a little wider than the default width for Harris (without going to the full width of screen). However, having this option is better.

Users won't know to try this.

Can you put something on the config page to help with this OR at least some text in the readme file that suggests users try the Harris layout for a narrower content width.

@laryn

[olafgrabienski]

@laryn You're right, I'm also interested to set a maximum width in Gin. Using a different layout to reduce the width is a nice idea. The Harris example looks however a bit awkward, I guess mainly because it has too many alignments (left, centered, and right).

I've also tried Moscone Flipped. It looks much better, in my opinion (see screenshot below). The approach feels however more like a workaround than a real option. Is there a particular reason why you're skeptical to provide a setting in Gin?

[olafgrabienski]

Didn't think about it before: The layout tweak approach isn't really responsive. It works quite good for wide screens but not for tablets or notebooks, as the reduced width applies equally to wide and narrower screens. Whereas a maximum width approach wouldn't reduce the width on smaller screens.

[olafgrabienski]

@laryn Was this closed by purpose? I'm fine with that, but I'm also wondering what you think about my last comments.

[laryn]

@olafgrabienski
No, sorry, accidentally/automatically closed! I'm still thinking this through. My main concern was not cluttering the settings page with duplicative settings (and encouraging people to learn/use features that are available in Backdrop that they may not know about) but you raise some good points.

[laryn]

@stpaultim @olafgrabienski I have this locally and would love to hear your thoughts. I know the initial request was perhaps multiple options or the ability to set a max-width manually, but in the interest of keeping it simple and uncluttered I opted for a toggle that sets (or doesn't) the .container class on the main layout div:

CleanShot.2023-12-22.at.12.27.05.mp4

@saschaeggi Have you had a request for a setting like this before? Do you have any thoughts here?

[saschaeggi]

@laryn we haven't. Also we're very cautious in introducing new settings as Gin is already pretty complex to maintain.

What we have in the upstream version is the ability to override and customize things easily as we use CSS variables for almost everything (see https://www.drupal.org/docs/contributed-themes/gin-admin-theme/custom-theming) and this would be the perfect case for that.

[laryn]

@saschaeggi Thanks for the quick response -- I'll give this some more thought. Perhaps it will be solvable via a docs page on the wiki here with some examples of various ways to achieve this, rather than a direct setting. As I'm still working through the initial port and getting to (as much as possible) parity, I don't want to introduce too much drift between features/settings.

[olafgrabienski]

@laryn Thanks for the container class idea! I've quickly tested the approach using the browser's dev tools, and I really like it.

Even if @stpaultim mentioned "a couple of width options", I guess the actual request is to have some option to reduce the width in the first place. In my opinion, a single on/off setting is totally fine. (Also, I don't recall a feature request for Backdrop / Basis to have various width options.)

I'm not surprised to hear that there hasn't been a similar request for the Drupal version. The Drupal admin layout is generally very wide, not only with Gin, but e.g. also with Claro (and formerly with Seven). Regarding the width, Gin isn't different from other themes in Drupal, but it is different from other themes in Backdrop.

If the max width container approach doesn't make the maintenance of Gin too complex, I'd still be very happy to have this option.

[laryn]

@olafgrabienski While I am thinking this through, an easy way to do this now, and through the UI, would be with CSS Injector. You could create a rule that just applies to Gin and add this:

.gin.layout {
  max-width: 1200px;
  margin: 0 auto;
}

[laryn]

This is just a note to think about: I'm trying to think about feature-parity with the Drupal version, and the custom theming piece linked above. CSS Injector is one alternative, but rather than require a third-party module for that, I wonder if it would make sense to implement something like what Pelerine has done with custom CSS in the UI:

• Allow custom css via user interface pelerine#5

[olafgrabienski]

Allow custom css via user interface

I like that!

(In my opinion it would even make sense to have it in core, but I guess it's more realistic to implement it in Gin before.)