Improve positioning of tabs on metrics.lecoq.io

[Andre601]

When watching https://metrics.lecoq.io do the tabs for "Metrics Preview", "Action Code", "Markdown Code" and "Metrics Insight" look quite a bit off...

They are fairly far to the left, which makes them feel somewhat out of place.
I suggest to make them align with the "box" that contains the example readme, so that "Metrics Preview"'s left side is aligned with the box's left side.

Screenshot of the visual issue:

[DalpatRathore]

Hi! @Andre601,
     I think you want to align navbar tabs and metrics preview as shown in screenshot:

[DalpatRathore]

I think it is doable. I have used the Google Chrome Devtools to showcase screenshot results. Let's wait and see the metrics maintainer's response.

[lowlighter]

Yeah it's not a stylistic choice 😅
I think some time in the past the sidebar width was increased, but tabs didn't get updated

If you already know how to fix it, you can submit a pull request for it 👍

[DalpatRathore]

I am good at Frontend - CSS, JS, and React but the web app is written in Vue. Though the stylistic issue can be easily fixed:

• Moving navbar tabs into metrics preview box.
• Using media queries to re-arrange.

[DalpatRathore]

I had made pull request #902 regarding this issue. Though I have used Google Chrome Devtools to solve it and then pasted code in the relevant file. Let's see if it works and solves the misplaced tabs menu issue.

[DalpatRathore]

Pull requests #903