🙂 Looking for an issue? Welcome! This issue is open for contribution. If this is the first time you’re requesting an issue, please:

• Read Contributing guidelines carefully. Pay extra attention to Using generative AI. Pull requests and comments that don’t follow the guidelines won’t be answered.
• Confirm that you’ve read the guidelines in your comment.

Sub-issue of #5060.

Complexity: Medium

Summary

Remove Vuetify layout components VContent and VContainer from Settings index page

in favor of creating a new shared/views/StudioPage component that has no Vuetify dependencies, and using it instead of VContent and VContainer in SettingsIndex.vue.

StudioPage requirements

• Expected usage example:

// SettingsIndex.vue

<StudioPage>
  <router-view />
</StudioPage>

• Sets width and height of the whole content area
• Receives content via the default slot
• Positions content below the app bar
• Positions content below the offline alert when visible
• Renders as <main>
• Sets maximum content width
  • For small and medium screens: 100% (no limit)
  • For large: 1000px limit
• Sets left and right padding
  • For small screens: 16px
  • For medium screens: 24px
  • For large screens: 48px
• Utilizes useKResponsiveLayout to detect small, medium, and large screen sizes

How to get there

• Login as [email protected] with password a
• Go to Settings
• To see the offline alert, turn on / off offline mode in browser development tools

Guidance

• Read the project this issue is part of
• https://design-system.learningequality.org/layout
• https://design-system.learningequality.org/usekresponsivewindow

Out of Scope

• Do not refactor any other areas of the codebase

Expected UI/UX changes

• Padding values were chosen to closely resemble the current experience. However, due to the migration to our breakpoint system, there will be differences in when values take effect. The configuration above should still result in a slightly
  improved experience, particularly on smaller screen sizes.
• Maximum content width will be 1000px instead of Vuetify's 1185px. 1000px is a standard value used in Kolibri for this purpose.

Acceptance criteria

• The specification above is followed.
• Except for "Expected UI/UX changes," there are no functional or visual differences in user experience.
• All user interactions are manually tested with no regressions.
• Pull request includes screenshots.
• Mobile experience is reasonable