[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?

5 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:

8 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.

5 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

Sorry to revive this old topic, but @AdamR is there a way to make this permanent? I have to do it every time I close the browser, it doesn’t keep the setting.

There is. I am vacationing right now, but either someone takes it up as (I believe) a relatively easy coding project and contributes the code to our https://github.com/online-go/online-go.com. If not, it is one of the things I wanna do, but it will be some time before I get to it, as I might make some additional changes to the custom goban image first and as I am slow. :grin:

So don’t let me stop you if someone else is considering it.

1 Like

Get that sun, mod! :+1:

Oh an if you meant make it permanent for you locally, that is also possible, but you would have to get familiar with some browser extensions like greasemonkey :monkey: to automatically inject css

2 Likes

Oh, I will! If need be, I’ll die on this hill!

EDIT: OK, I lied, I have no idea how to make tampermonkey work. I hope someone does the github. :woman_shrugging:

Specifically during the games I like how it is right now.

It’s only needed in reviews. Maybe we’ll rework the review page completely?

1 Like

I have not really thought about it too much yet, but my current thinking was make a small toggle button in the middle of the current division. So it would be optional, but probably still for reviews only, don’t see much need for it on games…

Otherwise I though the review layout is okay, but am happy to hear other opinions if you have some ideas for a rework…

1 Like

I need it lots during teaching games.
Many things to say and variations to look through.

2 Likes