chore: adjust display css props to tailwind

index.html

@@ -39,7 +39,6 @@
         display: none;
       }
       #loading {
-        display: inline-block;
         height: 34px;
         width: 34px;
         border: 1px solid #4c5f79;
@@ -110,7 +109,7 @@ <h2>Your browser is not supported</h2>
       <% } %>
     </div>
     <div id="splash-loading" class="splash-banner splash-hide">
-      <div id="loading"></div>
+      <div id="loading" class="inline-block"></div>
     </div>
     <div id="opencloud"></div>
     <noscript>

packages/design-system/docs/.vitepress/components/ComponentApi.vue

@@ -56,7 +56,7 @@
       v-if="slots.length"
       :fields="fields.filter((f) => f.name !== 'required')"
       :data="slots"
-      class="slots-table"
+      class="slots-table !table"
     >
       <template #type="{ item }">
         <code> {{ item.type }}</code>
@@ -128,7 +128,6 @@ onMounted(async () => {
 .emits-table,
 .props-table,
 .slots-table {
-  display: table !important;
   width: 100%;
   th,
   td {

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

@@ -7,7 +7,7 @@
     :role="accessibleLabel === '' ? null : 'img'"
   >
     <span
-      class="oc-avatar-item rounded-[50%]"
+      class="oc-avatar-item inline-flex items-center justify-center rounded-[50%]"
       :style="{
         backgroundColor,
         '--icon-color': iconColor,
@@ -102,13 +102,10 @@ const pickBackgroundColor = () => {
 
 <style lang="scss">
 .oc-avatar-item {
-  align-items: center;
   background-position: center;
   background-repeat: no-repeat;
   background-size: 18px;
-  display: inline-flex;
   height: var(--width);
-  justify-content: center;
   width: var(--width);
 
   .oc-icon > svg {

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

@@ -3,7 +3,7 @@
     <span
       ref="avatarsRef"
       v-oc-tooltip="tooltip"
-      class="oc-avatars"
+      class="oc-avatars inline-flex"
       aria-hidden="true"
       :class="avatarsClasses"
     >
@@ -202,7 +202,6 @@ onMounted(() => {
 </style>
 <style lang="scss">
 .oc-avatars {
-  display: inline-flex;
   box-sizing: border-box;
   flex-flow: row nowrap;
   width: fit-content;

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 oc-avatars-gap-xs" 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 oc-avatars-gap-xs" 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 oc-avatars-gap-xs" 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 oc-avatars-gap-xs" 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 oc-avatars-gap-xs" 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 oc-avatars-gap-xs" 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/OcBottomDrawer/__snapshots__/OcBottomDrawer.spec.ts.snap

@@ -8,7 +8,7 @@ exports[`OcBottomDrawer > renders when toggle is clicked 1`] = `
         <div class="oc-card bg-transparent">
           <div class="oc-card-header border-b-0 px-4 pt-4">
             <div class="flex justify-between items-center">
-              <!--v-if--> <span class="font-semibold">Bottom Drawer</span> <button type="button" aria-label="Close the context menu" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw raw-hover-surface oc-bottom-drawer-close-button">
+              <!--v-if--> <span class="font-semibold">Bottom Drawer</span> <button type="button" aria-label="Close the context menu" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex raw-hover-surface oc-bottom-drawer-close-button">
                 <!--v-if-->
                 <!-- @slot Content of the button --> <span class="oc-icon oc-icon-m box-content"><svg data-testid="inline-svg-stub" src="icons/close-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -22,7 +22,7 @@ exports[`OcBottomDrawer > renders when toggle is clicked 1`] = `
               </button>
             </div>
           </div>
-          <div class="oc-card-body px-4 pb-4 pt-2"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw raw-hover-surface" id="action-button">
+          <div class="oc-card-body px-4 pb-4 pt-2"><button type="button" class="oc-button oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw inline-flex raw-hover-surface" id="action-button">
               <!--v-if-->
               <!-- @slot Content of the button --> action button
             </button></div>

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

@@ -4,7 +4,7 @@
     :class="`oc-breadcrumb oc-breadcrumb-${variation}`"
     :aria-label="$gettext('Breadcrumbs')"
   >
-    <ol class="oc-breadcrumb-list flex m-0 p-0">
+    <ol class="oc-breadcrumb-list hidden sm:flex items-baseline m-0 p-0">
       <li
         v-for="(item, index) in displayItems"
         :key="index"
@@ -106,12 +106,15 @@
       type="router-link"
       :aria-label="$gettext('Navigate one level up')"
       :to="parentFolderTo"
-      class="oc-breadcrumb-mobile-navigation"
+      class="oc-breadcrumb-mobile-navigation sm:hidden block"
     >
       <oc-icon name="arrow-left-s" fill-type="line" size="large" />
     </oc-button>
   </nav>
-  <div v-if="displayItems.length > 1" class="oc-breadcrumb-mobile-current flex w-0 flex-1">
+  <div
+    v-if="displayItems.length > 1"
+    class="oc-breadcrumb-mobile-current sm:hidden flex justify-center items-center w-0 flex-1"
+  >
     <span class="truncate" aria-current="page" v-text="currentFolder.text" />
   </div>
 </template>
@@ -309,15 +312,25 @@ const dropItemStyling = (
   leaving ? classList.remove(className) : classList.add(className)
 }
 </script>
+
 <style>
 @reference '@opencloud-eu/design-system/tailwind';
 
 @layer components {
   .oc-breadcrumb-item-dragover {
     @apply bg-role-secondary-container;
   }
+
+  .oc-breadcrumb-list #oc-breadcrumb-contextmenu li button {
+    @apply inline-flex;
+  }
+
+  .oc-breadcrumb-list > li button {
+    @apply inline;
+  }
+
   .oc-breadcrumb-list > :nth-child(n + 2)::before {
-    @apply text-role-on-surface rounded-sm;
+    @apply inline-block text-role-on-surface rounded-sm;
   }
 }
 </style>
@@ -332,37 +345,14 @@ const dropItemStyling = (
       border-width 0.06s;
     box-shadow: 0 0 0 5px var(--oc-role-secondary-container);
   }
+
   &-item-text {
     max-width: 200px;
   }
 
-  &-mobile-current,
-  &-mobile-navigation {
-    @media (min-width: $oc-breakpoint-small-default) {
-      display: none !important;
-    }
-  }
-
   &-list {
     list-style: none;
-    align-items: baseline;
     flex-wrap: nowrap;
-
-    @media (max-width: $oc-breakpoint-xsmall-max) {
-      display: none !important;
-    }
-
-    #oc-breadcrumb-contextmenu li button {
-      display: inline-flex;
-    }
-
-    > li button {
-      display: inline;
-    }
-
-    > :nth-child(n + 2)::before {
-      display: inline-block;
-    }
   }
 }
 </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" aria-label="Breadcrumbs">
-  <ol class="oc-breadcrumb-list flex m-0 p-0">
+  <ol class="oc-breadcrumb-list hidden sm:flex items-baseline m-0 p-0">
     <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="oc-breadcrumb-item-text hover:underline align-sub truncate inline-block leading-[1.2]">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>
@@ -28,17 +28,17 @@ exports[`OcBreadcrumb > displays all items 1`] = `
       <!--v-if-->
     </li>
   </ol>
-  <oc-button-stub arialabel="Navigate one level up" to="[object Object]" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="oc-breadcrumb-mobile-navigation">
+  <oc-button-stub arialabel="Navigate one level up" to="[object Object]" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="oc-breadcrumb-mobile-navigation sm:hidden block">
     <oc-icon-stub accessiblelabel="" color="" filltype="line" name="arrow-left-s" size="large" type="span"></oc-icon-stub>
   </oc-button-stub>
 </nav>
 
-<div class="oc-breadcrumb-mobile-current flex w-0 flex-1"><span class="truncate" aria-current="page">Deeper ellipsize in responsive mode</span></div>"
+<div class="oc-breadcrumb-mobile-current sm:hidden flex justify-center items-center w-0 flex-1"><span class="truncate" aria-current="page">Deeper ellipsize in responsive mode</span></div>"
 `;
 
 exports[`OcBreadcrumb > sets correct variation 1`] = `
 "<nav id="oc-breadcrumbs-1" class="oc-breadcrumb oc-breadcrumb-lead" aria-label="Breadcrumbs">
-  <ol class="oc-breadcrumb-list flex m-0 p-0">
+  <ol class="oc-breadcrumb-list hidden sm:flex items-baseline m-0 p-0">
     <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="oc-breadcrumb-item-text hover:underline align-sub truncate inline-block leading-[1.2]">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>
@@ -64,10 +64,10 @@ exports[`OcBreadcrumb > sets correct variation 1`] = `
       <!--v-if-->
     </li>
   </ol>
-  <oc-button-stub arialabel="Navigate one level up" to="[object Object]" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="oc-breadcrumb-mobile-navigation">
+  <oc-button-stub arialabel="Navigate one level up" to="[object Object]" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="router-link" nohover="false" class="oc-breadcrumb-mobile-navigation sm:hidden block">
     <oc-icon-stub accessiblelabel="" color="" filltype="line" name="arrow-left-s" size="large" type="span"></oc-icon-stub>
   </oc-button-stub>
 </nav>
 
-<div class="oc-breadcrumb-mobile-current flex w-0 flex-1"><span class="truncate" aria-current="page">Deeper ellipsize in responsive mode</span></div>"
+<div class="oc-breadcrumb-mobile-current sm:hidden flex justify-center items-center w-0 flex-1"><span class="truncate" aria-current="page">Deeper ellipsize in responsive mode</span></div>"
 `;

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

@@ -4,6 +4,7 @@
     v-bind="additionalAttributes"
     :aria-label="ariaLabel"
     :class="buttonClass"
+    class="inline-flex"
     v-on="handlers"
   >
     <oc-spinner v-if="showSpinner" size="small" class="spinner" />
@@ -190,7 +191,7 @@ const onClick = (event: MouseEvent) => {
     @apply rounded-sm;
   }
   .oc-button-group {
-    @apply rounded-sm outline outline-role-secondary outline-offset-[-1px];
+    @apply inline-flex flex-row flex-wrap rounded-sm outline outline-role-secondary outline-offset-[-1px];
   }
   .oc-button-group .oc-button {
     @apply rounded-none first:rounded-l-sm last:rounded-r-sm outline-0;
@@ -256,7 +257,6 @@ const onClick = (event: MouseEvent) => {
 .oc-button {
   align-items: center;
   box-sizing: border-box;
-  display: inline-flex;
 
   &-justify-content {
     &-left {
@@ -388,11 +388,6 @@ const onClick = (event: MouseEvent) => {
       cursor: default;
       opacity: 0.6;
     }
-
-    &-group {
-      display: inline-flex;
-      flex-flow: row wrap;
-    }
   }
 }
 .quick-action-button,

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

@@ -81,7 +81,8 @@ const classes = computed(() => [
   'checked:bg-white',
   'disabled:bg-role-surface-container-low',
   'indeterminate:bg-white',
-  'bg-transparent'
+  'bg-transparent',
+  'inline-block'
 ])
 
 const labelClasses = computed(() => ({
@@ -123,7 +124,6 @@ const keydownEnter = (event: KeyboardEvent) => {
 
   background-position: 50% 50% !important;
   background-repeat: no-repeat !important;
-  display: inline-block;
   overflow: hidden;
 
   &-s {

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="oc-contextual-helper">
+  <div class="oc-contextual-helper inline-block">
     <oc-button
       :id="buttonId"
       :aria-label="$gettext('Show more information')"
@@ -52,9 +52,3 @@ const buttonId = computed(() => `${dropId.value}-button`)
 const toggleId = computed(() => `#${buttonId.value}`)
 const props = computed(() => ({ title, text, list, endText, readMoreLink }))
 </script>
-
-<style lang="scss">
-.oc-contextual-helper {
-  display: inline-block;
-}
-</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <dl class="details-list">
+  <dl class="details-list grid grid-cols-[auto_minmax(0,1fr)]">
     <!-- eslint-disable-next-line vue/no-v-for-template-key -->
     <template v-for="item in items" :key="item.term">
       <dt>{{ item.term }}</dt>
@@ -46,9 +46,3 @@ const { items } = defineProps<Props>()
   }
 }
 </style>
-<style lang="scss">
-.details-list {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-}
-</style>

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

@@ -180,9 +180,7 @@ defineExpose({ hideDrop })
 <style lang="scss">
 .oc-filter-chip {
   &-button.oc-pill {
-    align-items: center;
     box-sizing: border-box;
-    display: inline-flex;
     gap: var(--oc-space-xsmall);
     max-width: 150px;
     height: 100%;

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

@@ -106,7 +106,11 @@ const transformSvgElement = (svg: SVGElement) => {
 
 @layer components {
   .oc-icon {
-    @apply align-baseline;
+    @apply align-baseline inline-block;
+  }
+
+  .oc-icon svg {
+    @apply block;
   }
 }
 </style>
@@ -120,11 +124,6 @@ const transformSvgElement = (svg: SVGElement) => {
 
 .oc-icon {
   // SVG wrapper
-  display: inline-block;
-
-  svg {
-    display: block;
-  }
 
   &,
   > svg {

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

@@ -1,7 +1,7 @@
 <template>
   <oc-drop
     ref="drop"
-    class="oc-width-1-1 oc-info-drop"
+    class="oc-width-1-1 oc-info-drop inline-block"
     :drop-id="dropId"
     :toggle="toggle"
     :mode="mode"
@@ -121,7 +121,6 @@ export default {
 </script>
 <style lang="scss">
 .oc-info-drop {
-  display: inline-block;
   .info-header {
     align-items: center;
   }