[Solved] How to make right-col wider?

During reviews and such chat and “Move comments…” field is a bit too narrow. I’d like to make the panel on the right (marked red) wider. We have plenty of space (marked with white squiggly lines) for that.

How to make the panel take up as much space as possible? I can change CSS locally and that’s how I’d like to do it. But I’m not too familiar with CSS, a bit of help would be appreciated. Which fields I should change?

4 Likes

After I took the screenshots I realized it is likely you are not using FF - sorry, but hopefully the general idea should lead you to solution anyway.

F12 to bring out the dev tools

You are looking for a <div> with the “right-col” class (as in right column).

The easiest way to find it (for me) is to just activate the element selection tool (1) hover over the right column until the whole column is highlighted and then left-clicking.

The number you need to adjust is the flex-basis (default 25% as in quarter of the browser area), and you probably want to change it to 50%

Either way this actually sounds like a cool option to have in the interface and not terribly hard addition doable from the frontend so if there are any coders looking for a starter challenge our github is here: https://github.com/online-go/online-go.com/

Also also, note that you can expand the tree or comment boxes by the lower right edge. I did not notice until like a week ago :smiley:

7 Likes

Thank you, totally works.

3 Likes

I’ve never messed with this kind of thing before but I’ve made it work too. Thankyou AdamR for solution and S_Alexander for asking.

This will be particularly useful for reviews. I hope someone implements it site-wide.

ps. One of the dead stones wasn’t marked.

4 Likes

The challenge is that the “correct” value to achieve this look depends on each person’s screen - ranging from tiny portrait layout phones to massive 4k landscape screens.

2 Likes

we could bind it to a click and drag though, right?

2 Likes

I would argue, you can remove the borders (flex 0). You can adjust the rest by resizing your window.

2 Likes

AdamR, thank you. On a MacBook Air keyboard, it’s fn+F12, otherwise F12 by itself is increase volume. I tried it and it works for Firefox. Could someone elaborate flovo’s note about “(flex 0)” in a style similar to AdamR’s step-by-step instructions.

1 Like

It’s Ctrl+Shift+I for me, I guess (Chrome).
And I can do it to any game I need to separately, right?
And 40% seems about right so it doesn’t make my goban feel insignificant.

1 Like