[Remove Vuetify from Studio] Page layout in Settings

[AadarshM07]

Summary

• Created a component shared/views/StudioPage that has no Vuetify dependencies, and used it instead of VContent and VContainer in SettingsIndex.vue.
• Ensured UI consistency to match the previous layout. Followed all necessary instructions regarding layout mentioned in the guidelines.

screenshots

References

Closes #5132

Reviewer guidance

• I’ve added an offline prop to pass the offline state so appropriate top margin can be applied when the site is offline. This is a slight change from the example usage mentioned in the issue. If this approach isn’t necessary and another method is preferred, please let me know and I’ll update it accordingly.

[MisRob]

Thanks @AadarshM07, I will review next week.

[MisRob]

Very nice work, layout seems great on all resolutions and as expected @AadarshM07, thank you.

I’ve added an offline prop to pass the offline state so appropriate top margin can be applied when the site is offline. This is a slight change from the example usage mentioned in the issue. If this approach isn’t necessary and another method is preferred, please let me know and I’ll update it accordingly.

Ah yes, thanks for taking care of that. It makes sense to not lose space when the bar appears. I previewed and one thing I noticed is that now the page jumps quite a lot (two times at least) when the offline bar appears/disappears which would be rather distracting. Can we mitigate that? It's possible it was happening before to some extent, but not so much. Let me know if you had any ideas.

[MisRob]

@AadarshM07 also linting check is failing. It's best to install precommit.

[AadarshM07]

Hello @MisRob, I’ve made the requested changes. due to some rebase issues, I had to squash everything into a single commit. I’m also using precommit now, so formatting should stay clean, Hope this helps!

[MisRob]

Thanks @AadarshM07, layout is good. Have you had a chance to consider?

...now the page jumps quite a lot (two times at least) when the offline bar appears/disappears which would be rather distracting. Can we mitigate that? It's possible it was happening before to some extent, but not so much. Let me know if you had any ideas.

I think this should be the last thing to address.

[AadarshM07]

Screencast.from.2025-09-08.18-50-26.webm

current working

@MisRob I did look into this during the latest changes,and I believe after fixing some padding issues,it has improved and is now closer to how it was before. While developing StudioOfflineAlert ,I noticed the same issue but wasn’t able to figure it out. I think it might be related to one of the KDS custom components we’re using, which could be introducing an extra layer of padding . Do you have any suggestions regarding this? I’ll look into it further.

[MisRob]

@AadarshM07 Ah yes, it's better than what I observed. Still not quite ideal but this was happening before too. I wonder if it could be resolved by moving StudioOfflineAlert to StudioPage, and applying transition and padding changes in a coordinated manner.

If you'd be interested, you're welcome to play with it and message me on our Slack #dev-community. I wanted to mention I will be on vacation soon until September 22 - so in case you needed anything, I will get back to you as soon as I'm back.

In any case, that'd be outside the scope of this PR. I will merge now - nice work, thanks!