refactor: remaining flex props, display and fill to tailwind

packages/design-system/docs/components/OcRadio/group.vue

@@ -5,7 +5,7 @@
     v-model="inputValue"
     :option="o"
     :label="o"
-    class="oc-display-block"
+    class="block"
   />
   <p>Selection: {{ inputValue || 'None' }}</p>
 </template>

packages/design-system/src/components/OcApplicationIcon/OcApplicationIcon.vue

@@ -3,7 +3,7 @@
     class="oc-application-icon inline-flex items-center justify-center rounded-sm w-8 h-8"
     :style="iconStyle"
   >
-    <oc-icon :name="icon" :color="iconColor" size="medium" />
+    <oc-icon :name="icon" color="var(--oc-role-on-secondary)" size="medium" />
   </div>
 </template>
 
@@ -31,9 +31,6 @@ export interface Props {
 
 const { icon, colorPrimary } = defineProps<Props>()
 
-const iconColor = computed(() => {
-  return 'rgba(255,255,255,0.7)'
-})
 const primaryColor = computed(() => {
   return getHexFromCssVar(colorPrimary || '')
 })
@@ -57,13 +54,3 @@ const iconStyle = computed(() => {
   }
 })
 </script>
-
-<style lang="scss">
-.oc-application-icon {
-  .oc-icon {
-    svg {
-      fill: var(--oc-role-on-secondary) !important;
-    }
-  }
-}
-</style>

packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue

@@ -10,12 +10,17 @@
       class="oc-avatar-item inline-flex items-center justify-center rounded-[50%]"
       :style="{
         backgroundColor,
-        '--icon-color': iconColor,
         width: avatarWidth,
         height: avatarWidth
       }"
     >
-      <oc-icon v-if="hasIcon" :name="icon" :size="iconSize" :fill-type="iconFillType" />
+      <oc-icon
+        v-if="hasIcon"
+        :name="icon"
+        :color="iconColor"
+        :size="iconSize"
+        :fill-type="iconFillType"
+      />
     </span>
   </div>
 </template>
@@ -106,9 +111,5 @@ const pickBackgroundColor = () => {
   background-position: center;
   background-repeat: no-repeat;
   background-size: 18px;
-
-  .oc-icon > svg {
-    fill: var(--icon-color) !important;
-  }
 }
 </style>

packages/design-system/src/components/OcAvatars/OcAvatars.vue

@@ -3,7 +3,7 @@
     <span
       ref="avatarsRef"
       v-oc-tooltip="tooltip"
-      class="oc-avatars inline-flex w-fit"
+      class="oc-avatars inline-flex w-fit flex-nowrap flex-row"
       aria-hidden="true"
       :class="{
         'oc-avatars-stacked': stacked,
@@ -200,9 +200,6 @@ onMounted(() => {
 </style>
 <style lang="scss">
 .oc-avatars {
-  box-sizing: border-box;
-  flex-flow: row nowrap;
-
   &-hover-effect {
     > *:hover {
       z-index: 1000 !important;

packages/design-system/src/components/OcAvatars/__snapshots__/OcAvatars.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`OcAvatars > displays tooltip 1`] = `"<span><span class="oc-avatars inline-flex w-fit gap-0.5" aria-hidden="true"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub> <!--v-if--> <oc-avatar-count-stub count="3" size="30"></oc-avatar-count-stub></span> <span class="oc-invisible-sr">List of users</span></span>"`;
+exports[`OcAvatars > displays tooltip 1`] = `"<span><span class="oc-avatars inline-flex w-fit flex-nowrap flex-row gap-0.5" aria-hidden="true"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub> <!--v-if--> <oc-avatar-count-stub count="3" size="30"></oc-avatar-count-stub></span> <span class="oc-invisible-sr">List of users</span></span>"`;
 
-exports[`OcAvatars > prefers avatars over links when maxDisplayed is exceeded 1`] = `"<span><span class="oc-avatars inline-flex w-fit gap-0.5" aria-hidden="true"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="" username="John Richards Emperor of long names" width="30" icon-size="small"></oc-avatar-stub> <!--v-if--> <oc-avatar-count-stub count="2" size="30"></oc-avatar-count-stub></span> <span class="oc-invisible-sr">List of users</span></span>"`;
+exports[`OcAvatars > prefers avatars over links when maxDisplayed is exceeded 1`] = `"<span><span class="oc-avatars inline-flex w-fit flex-nowrap flex-row gap-0.5" aria-hidden="true"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="" username="John Richards Emperor of long names" width="30" icon-size="small"></oc-avatar-stub> <!--v-if--> <oc-avatar-count-stub count="2" size="30"></oc-avatar-count-stub></span> <span class="oc-invisible-sr">List of users</span></span>"`;
 
-exports[`OcAvatars > shows avatars first and links last 1`] = `"<span><span class="oc-avatars inline-flex w-fit gap-0.5" aria-hidden="true"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="" username="John Richards Emperor of long names" width="30" icon-size="small"></oc-avatar-stub> <oc-avatar-link-stub name="link 0" accessiblelabel="" iconsize="small" width="30"></oc-avatar-link-stub><oc-avatar-link-stub name="link 1" accessiblelabel="" iconsize="small" width="30"></oc-avatar-link-stub> <!--v-if--></span> <span class="oc-invisible-sr">List of users</span></span>"`;
+exports[`OcAvatars > shows avatars first and links last 1`] = `"<span><span class="oc-avatars inline-flex w-fit flex-nowrap flex-row gap-0.5" aria-hidden="true"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="" username="John Richards Emperor of long names" width="30" icon-size="small"></oc-avatar-stub> <oc-avatar-link-stub name="link 0" accessiblelabel="" iconsize="small" width="30"></oc-avatar-link-stub><oc-avatar-link-stub name="link 1" accessiblelabel="" iconsize="small" width="30"></oc-avatar-link-stub> <!--v-if--></span> <span class="oc-invisible-sr">List of users</span></span>"`;

packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue

@@ -4,7 +4,7 @@
     :class="`oc-breadcrumb oc-breadcrumb-${variation} overflow-visible`"
     :aria-label="$gettext('Breadcrumbs')"
   >
-    <ol class="oc-breadcrumb-list hidden sm:flex items-baseline m-0 p-0">
+    <ol class="oc-breadcrumb-list hidden sm:flex items-baseline m-0 p-0 flex-nowrap">
       <li
         v-for="(item, index) in displayItems"
         :key="index"
@@ -337,7 +337,6 @@ const dropItemStyling = (
 .oc-breadcrumb {
   &-list {
     list-style: none;
-    flex-wrap: nowrap;
   }
 }
 </style>

packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`OcBreadcrumb > displays all items 1`] = `
 "<nav id="oc-breadcrumbs-2" class="oc-breadcrumb oc-breadcrumb-default overflow-visible" aria-label="Breadcrumbs">
-  <ol class="oc-breadcrumb-list hidden sm:flex items-baseline m-0 p-0">
+  <ol class="oc-breadcrumb-list hidden sm:flex items-baseline m-0 p-0 flex-nowrap">
     <li data-key="0" class="oc-breadcrumb-list-item flex items-center">
       <router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl text-role-on-surface"><span class="hover:underline align-sub truncate inline-block leading-[1.2] max-w-3xs">First folder</span></router-link-stub>
       <oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1 align-sub"></oc-icon-stub>
@@ -38,7 +38,7 @@ exports[`OcBreadcrumb > displays all items 1`] = `
 
 exports[`OcBreadcrumb > sets correct variation 1`] = `
 "<nav id="oc-breadcrumbs-1" class="oc-breadcrumb oc-breadcrumb-lead overflow-visible" aria-label="Breadcrumbs">
-  <ol class="oc-breadcrumb-list hidden sm:flex items-baseline m-0 p-0">
+  <ol class="oc-breadcrumb-list hidden sm:flex items-baseline m-0 p-0 flex-nowrap">
     <li data-key="0" class="oc-breadcrumb-list-item flex items-center">
       <router-link-stub tag="a" to="[object Object]" class="first:text-base text-xl text-role-on-surface"><span class="hover:underline align-sub truncate inline-block leading-[1.2] max-w-3xs">First folder</span></router-link-stub>
       <oc-icon-stub accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1 align-sub"></oc-icon-stub>

packages/design-system/src/components/OcButton/OcButton.vue

@@ -178,7 +178,7 @@ const onClick = (event: MouseEvent) => {
     @apply py-1.5 px-2.5;
   }
   .oc-button {
-    @apply rounded-sm;
+    @apply rounded-sm items-center;
   }
   .oc-button-group {
     @apply inline-flex flex-row flex-wrap rounded-sm outline outline-role-secondary outline-offset-[-1px];
@@ -239,8 +239,6 @@ const onClick = (event: MouseEvent) => {
 }
 
 .oc-button {
-  align-items: center;
-
   @layer components {
     &-primary {
       @include oc-button-color-role(var(--oc-role-primary), var(--oc-role-on-primary));

packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue

@@ -12,7 +12,7 @@
   >
     <focus-trap :active="dropOpen">
       <div class="info-drop-content">
-        <div class="flex justify-between info-header border-b pb-2">
+        <div class="flex justify-between items-center info-header border-b pb-2">
           <h4 class="m-0 info-title text-lg font-normal" v-text="$gettext(title)" />
           <oc-button appearance="raw" :aria-label="$gettext('Close')" class="align-middle">
             <oc-icon name="close" fill-type="line" size="medium" />
@@ -119,10 +119,3 @@ export default {
   components: { FocusTrap }
 }
 </script>
-<style lang="scss">
-.oc-info-drop {
-  .info-header {
-    align-items: center;
-  }
-}
-</style>

packages/design-system/src/components/OcPagination/OcPagination.vue

@@ -7,7 +7,7 @@
           :aria-label="$gettext('Go to the previous page')"
           :to="previousPageLink"
         >
-          <oc-icon name="arrow-drop-left" fill-type="line" />
+          <oc-icon name="arrow-drop-left" fill-type="line" color="var(--oc-role-on-surface)" />
         </router-link>
       </li>
       <li v-for="(page, index) in displayedPages" :key="index" class="oc-pagination-list-item">
@@ -26,7 +26,7 @@
           :aria-label="$gettext('Go to the next page')"
           :to="nextPageLink"
         >
-          <oc-icon name="arrow-drop-right" fill-type="line" />
+          <oc-icon name="arrow-drop-right" fill-type="line" color="var(--oc-role-on-surface)" />
         </router-link>
       </li>
     </ol>
@@ -169,15 +169,6 @@ const bindPageLink = (page: Page) => {
 .oc-pagination {
   &-list {
     list-style: none;
-
-    &-item {
-      &-prev,
-      &-next {
-        > .oc-icon > svg {
-          fill: var(--oc-role-on-surface);
-        }
-      }
-    }
   }
 }
 </style>

packages/design-system/src/components/OcRecipient/OcRecipient.vue

@@ -10,6 +10,7 @@
         :accessible-label="recipient.icon.label"
         icon-size="xsmall"
         data-testid="recipient-icon"
+        icon-color="var(--oc-role-on-surface)"
       />
     </slot>
     <p class="oc-recipient-name m-0" data-testid="recipient-name" v-text="recipient.name" />
@@ -49,10 +50,3 @@ defineSlots<Slots>()
   }
 }
 </style>
-<style lang="scss">
-.oc-recipient {
-  &-icon > svg {
-    fill: var(--oc-role-on-surface);
-  }
-}
-</style>

packages/design-system/src/styles/theme/helper.scss

@@ -88,14 +88,3 @@
     border-top-right-radius: 5px;
   }
 }
-
-
-
-.oc-bottom-drawer li,
-.oc-drop li {
-  a,
-  .item-has-switch,
-  button:not([role='switch']) {
-    justify-content: flex-start;
-  }
-}

packages/web-app-activities/src/components/ActivityItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center activity-item">
+  <div class="flex items-center activity-item [&>*]:flex-1">
     <div class="flex items-center text-left">
       <oc-avatar :width="36" :user-name="activity.template.variables?.user?.displayName" />
       <span class="ml-2" v-text="activity.template.variables?.user?.displayName" />
@@ -88,9 +88,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style lang="scss">
-.activity-item > * {
-  flex: 1;
-}
-</style>

packages/web-app-admin-settings/src/components/AppTemplate.vue

@@ -1,6 +1,6 @@
 <template>
   <main class="flex app-content size-full rounded-l-xl">
-    <div class="admin-settings-wrapper flex-1 flex size-full flex-wrap">
+    <div class="admin-settings-wrapper flex-1 flex size-full flex-nowrap sm:flex-wrap">
       <app-loading-spinner v-if="loading" />
       <template v-else>
         <div id="admin-settings-view-wrapper" class="flex-1 size-full flex-wrap overflow-y-auto">
@@ -217,19 +217,6 @@ export default defineComponent({
 
 <style lang="scss">
 #admin-settings-app-bar {
-  box-sizing: border-box;
   z-index: 2;
 }
-
-.admin-settings-app-bar-controls {
-  @media (max-width: $oc-breakpoint-xsmall-max) {
-    justify-content: space-between;
-  }
-}
-
-@media only screen and (max-width: $oc-breakpoint-small-default) {
-  .admin-settings-wrapper {
-    flex-wrap: nowrap !important;
-  }
-}
 </style>

packages/web-app-admin-settings/src/components/Groups/SideBar/EditPanel.vue

@@ -150,11 +150,3 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss">
-#group-edit-panel {
-  .group-info {
-    align-items: center;
-    flex-direction: column;
-  }
-}
-</style>

packages/web-app-admin-settings/src/components/Groups/SideBar/GroupInfoBox.vue

@@ -44,9 +44,3 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss">
-.gr-info {
-  align-items: center;
-  flex-direction: column;
-}
-</style>

packages/web-app-admin-settings/src/components/Users/GroupSelect.vue

@@ -15,7 +15,7 @@
       <template #selected-option="{ displayName, id }">
         <span class="flex justify-center">
           <avatar-image
-            class="flex oc-align-self-center mr-2"
+            class="flex self-center mr-2"
             :width="16.8"
             :userid="id"
             :user-name="displayName"
@@ -27,7 +27,7 @@
         <div class="flex">
           <span class="flex justify-center">
             <avatar-image
-              class="flex oc-align-self-center mr-2"
+              class="flex self-center mr-2"
               :width="16.8"
               :userid="id"
               :user-name="displayName"

packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/EditPanel.spec.ts.snap

@@ -5,10 +5,10 @@ exports[`EditPanel > renders all available inputs 1`] = `
   <div class="group-info flex flex-col items-center mb-6"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] mb-4" style="width: 80px; height: 80px; line-height: 80px; background-color: var(--oc-role-secondary); font-size: 32px; font-family: Helvetica, Arial, sans-serif; color: white;" width="80" aria-hidden="true" focusable="false" data-test-user-name="group"><span class="avatar-initials" style="color: white;">G</span></span> <span class="text-role-on-surface-variant text-2xl">group</span> <span class="text-role-on-surface-variant">0 members</span></div>
   <form id="group-edit-form" class="bg-role-surface-container p-4 rounded-t-sm" autocomplete="off">
     <oc-text-input-stub id="displayName-input" modelvalue="group" class="mb-2" label="Group name" error-message="" fix-message-line="true" required-mark=""></oc-text-input-stub>
-    <div data-v-79550c21="" class="compare-save-dialog w-full flex justify-between items-center edit-compare-save-dialog mb-6 rounded-b-sm"><span data-v-79550c21="" class="state-indicator">No changes</span>
-      <div data-v-79550c21="">
-        <oc-button-stub data-v-79550c21="" disabled="true" class="compare-save-dialog-revert-btn"></oc-button-stub>
-        <oc-button-stub data-v-79550c21="" appearance="filled" class="compare-save-dialog-confirm-btn" disabled="true"></oc-button-stub>
+    <div class="compare-save-dialog w-full flex flex-row flex-wrap justify-between items-center edit-compare-save-dialog mb-6 rounded-b-sm"><span class="state-indicator">No changes</span>
+      <div>
+        <oc-button-stub disabled="true" class="compare-save-dialog-revert-btn"></oc-button-stub>
+        <oc-button-stub appearance="filled" class="compare-save-dialog-confirm-btn" disabled="true"></oc-button-stub>
       </div>
     </div>
   </form>

packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap

@@ -3,7 +3,7 @@
 exports[`Spaces view > loading states > should render spaces list after loading has been finished 1`] = `
 "<div>
   <main class="flex app-content size-full rounded-l-xl">
-    <div class="admin-settings-wrapper flex-1 flex size-full flex-wrap">
+    <div class="admin-settings-wrapper flex-1 flex size-full flex-nowrap sm:flex-wrap">
       <div id="admin-settings-view-wrapper" class="flex-1 size-full flex-wrap overflow-y-auto">
         <div id="admin-settings-app-bar" class="oc-app-bar py-2 px-4 bg-role-surface top-0 sticky">
           <div class="admin-settings-app-bar-controls flex justify-between items-center h-13">

packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap

@@ -3,7 +3,7 @@
 exports[`Users view > list view > renders initially warning if filters are mandatory 1`] = `
 "<div>
   <main class="flex app-content size-full rounded-l-xl">
-    <div class="admin-settings-wrapper flex-1 flex size-full flex-wrap">
+    <div class="admin-settings-wrapper flex-1 flex size-full flex-nowrap sm:flex-wrap">
       <div id="admin-settings-view-wrapper" class="flex-1 size-full flex-wrap overflow-y-auto">
         <div id="admin-settings-app-bar" class="oc-app-bar py-2 px-4 bg-role-surface top-0 sticky">
           <div class="admin-settings-app-bar-controls flex justify-between items-center h-13">
@@ -63,7 +63,7 @@ exports[`Users view > list view > renders initially warning if filters are manda
 exports[`Users view > list view > renders list initially 1`] = `
 "<div>
   <main class="flex app-content size-full rounded-l-xl">
-    <div class="admin-settings-wrapper flex-1 flex size-full flex-wrap">
+    <div class="admin-settings-wrapper flex-1 flex size-full flex-nowrap sm:flex-wrap">
       <div id="admin-settings-view-wrapper" class="flex-1 size-full flex-wrap overflow-y-auto">
         <div id="admin-settings-app-bar" class="oc-app-bar py-2 px-4 bg-role-surface top-0 sticky">
           <div class="admin-settings-app-bar-controls flex justify-between items-center h-13">