Reduce nav tab border width and adjust sidebar padding for improved layout

[hichemfantar]

Decrease the navigation tab border width and remove unnecessary padding in the sidebar for a cleaner layout and more horizontal space.

before

after

[github-actions]

📦 Docs artifacts are ready: https://github.com/elixir-lang/ex_doc/actions/runs/12886473794/artifacts/2461130678

[josevalim]

@hichemfantar let's go ahead and reduce the left border of the active selection as well for consistency? I believe those two are meant to be in sync. :)

[hichemfantar]

all good

[josevalim]

The left entries are no longer aligned:

We need to either bring everything a bit more to the left or the "Pages" a bit more to the right. Sorry for the pixel shaving but it feels this is the type of feedback you would want to give/receive. :)

[josevalim]

Also, for a future somewhat related discussion, @DavidOliver @jonatanklosko @liamcmitchell @wojtekmach @garazdawi, which style of sidebar tabs do you prefer? The current ones or:

Because if we want to change them, I'd do it as we thinner the borders. The third one is showing the mouseover state.

[hichemfantar]

We need to either bring everything a bit more to the left or the "Pages" a bit more to the right. Sorry for the pixel shaving but it feels this is the type of feedback you would want to give/receive. :)

fixed 🚀

[josevalim]

Thank you, I am closing shop for today to focus on a new Elixir patch release, I should be back tomorrow. :)

[hichemfantar]

alright so it's down to these options @DavidOliver @jonatanklosko @liamcmitchell @wojtekmach @garazdawi

v1 (active -> inactive -> hover state)

@josevalim i used this because i thought you preferred the old design

v2 (active -> inactive -> hover state)

this was my initial idea which is more inline with body content tabs

v3 (active -> inactive -> hover state)

same as 2 but without bg color on hover state, bottom border is enough to convey the state (my favorite)

v3 after all accessibility concerns are addressed in the other open PRs

I'm leaning towards v3 personally

[josevalim]

Let's go with v3. Do you already want to go ahead and change its border style in this PR or a future one? Please do not change the font style for now. :) Thank you!

[DavidOliver]

Sorry for the delayed response. I agree the new style looks to work well, and I like that it matches the new style of content tabs. Title case instead of uppercase is also fine, in my opinion.

@hichemfantar, I expect you have focus (as well as hover) styles in place?

Thanks.

[hichemfantar]

v3 applied

here's the focus and hover state @DavidOliver