From 48c01e445c19aea9b48c3ac1f6fb32bc4f11d5e5 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Mon, 3 Nov 2025 14:13:53 +0100
Subject: [PATCH] fix: bottom drawer 'New'-menus appearance

(cherry picked from commit e24d1b29bae5bf9715ad103fba86e9651a897100)
---
 .../OcBottomDrawer/OcBottomDrawer.vue         |  5 ++-
 .../src/components/AppBar/CreateAndUpload.vue | 24 +++++++++-----
 .../AppBar/Upload/ResourceUpload.vue          |  2 +-
 .../__snapshots__/ResourceUpload.spec.ts.snap |  4 +--
 .../CreateAndUpload.spec.ts.snap              | 32 +++++++++----------
 5 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue b/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue
index 4c7f52db48..cb3ce5ec36 100644
--- a/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue
+++ b/packages/design-system/src/components/OcBottomDrawer/OcBottomDrawer.vue
@@ -18,7 +18,10 @@
             '[&.active]:bottom-0': isCurrentlyOnTop
           }"
         >
-          <oc-card class="bg-transparent" header-class="flex flex-row justify-between items-center">
+          <oc-card
+            class="bg-transparent overflow-x-hidden"
+            header-class="flex flex-row justify-between items-center"
+          >
             <template #header>
               <oc-button
                 v-if="drawers.length > 1"
diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index 70c5ac0602..5943c79553 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -25,8 +25,8 @@
       >
         <oc-list
           id="create-list"
-          :class="areFileExtensionsShown ? 'min-w-xs' : null"
-          class="py-2 first:pt-0 last:pb-0"
+          :class="areFileExtensionsShown ? 'sm:min-w-xs' : null"
+          class="py-2 sm:first:pt-0 sm:last:pb-0"
         >
           <li>
             <oc-button
@@ -36,7 +36,11 @@
               appearance="raw"
               @click="createNewFolderAction"
             >
-              <resource-icon :resource="folderIconResource" size="medium" class="h-full" />
+              <resource-icon
+                :resource="folderIconResource"
+                size="medium"
+                class="[&_svg]:h-5.5! sm:[&_svg]:h-full"
+              />
               <span v-text="$gettext('Folder')" />
             </oc-button>
           </li>
@@ -44,7 +48,7 @@
         <oc-list
           v-for="(group, groupIndex) in createFileActionsGroups"
           :key="`file-creation-group-${groupIndex}`"
-          class="py-2 first:pt-0 last:pb-0 border-t"
+          class="py-2 sm:first:pt-0 sm:last:pb-0 border-t"
         >
           <li
             v-for="(fileAction, fileActionIndex) in group"
@@ -57,7 +61,11 @@
               :class="['new-file-btn-' + fileAction.ext]"
               @click="fileAction.handler"
             >
-              <resource-icon :resource="getIconResource(fileAction)" size="medium" class="h-full" />
+              <resource-icon
+                :resource="getIconResource(fileAction)"
+                size="medium"
+                class="[&_svg]:h-5.5! sm:[&_svg]:h-full"
+              />
               <span>{{ fileAction.label() }}</span>
               <span v-if="areFileExtensionsShown && fileAction.ext" class="ml-auto text-sm">
                 {{ fileAction.ext }}
@@ -65,7 +73,7 @@
             </oc-button>
           </li>
         </oc-list>
-        <oc-list class="py-2 first:pt-0 last:pb-0 border-t">
+        <oc-list class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
           <li>
             <oc-button
               id="new-shortcut-btn"
@@ -120,7 +128,7 @@
       padding-size="small"
       @show-drop="showDrop"
     >
-      <oc-list id="upload-list">
+      <oc-list id="upload-list" class="py-2 sm:first:pt-0 sm:last:pb-0">
         <li>
           <resource-upload btn-class="w-full" />
         </li>
@@ -131,7 +139,7 @@
       <oc-list
         v-if="extensionActions.length"
         id="extension-list"
-        class="py-2 first:pt-0 last:pb-0 border-t"
+        class="py-2 sm:first:pt-0 sm:last:pb-0 border-t"
       >
         <li
           v-for="(action, key) in extensionActions"
diff --git a/packages/web-app-files/src/components/AppBar/Upload/ResourceUpload.vue b/packages/web-app-files/src/components/AppBar/Upload/ResourceUpload.vue
index cbec2d549c..1402b74de9 100644
--- a/packages/web-app-files/src/components/AppBar/Upload/ResourceUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/Upload/ResourceUpload.vue
@@ -11,7 +11,7 @@
       :disabled="isRemoteUploadInProgress"
       @click="triggerUpload"
     >
-      <resource-icon :resource="resource" size="medium" class="h-full" />
+      <resource-icon :resource="resource" size="medium" class="[&_svg]:h-5.5! sm:[&_svg]:h-full" />
       <span :id="uploadLabelId">{{ buttonLabel }}</span>
     </oc-button>
     <input
diff --git a/packages/web-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.ts.snap
index 4afc482ab4..29ac4d207c 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`Resource Upload Component > file upload > should render component 1`] = `
 "<div><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default">
     <!--v-if-->
-    <!-- @slot Content of the button --> <span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-5.5 oc-resource-icon inline-flex items-center [&amp;_svg]:h-[70%] h-full"><svg data-testid="inline-svg-stub" src="icons/resource-type-file-fill.svg" transform-source="(svg) => {
+    <!-- @slot Content of the button --> <span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-5.5 oc-resource-icon inline-flex items-center [&amp;_svg]:h-[70%] [&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"><svg data-testid="inline-svg-stub" src="icons/resource-type-file-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -18,7 +18,7 @@ exports[`Resource Upload Component > file upload > should render component 1`] =
 exports[`Resource Upload Component > folder upload > should render component 1`] = `
 "<div><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default">
     <!--v-if-->
-    <!-- @slot Content of the button --> <span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-5.5 oc-resource-icon inline-flex items-center h-full"><svg data-testid="inline-svg-stub" src="icons/resource-type-folder-fill.svg" transform-source="(svg) => {
+    <!-- @slot Content of the button --> <span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-5.5 oc-resource-icon inline-flex items-center [&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"><svg data-testid="inline-svg-stub" src="icons/resource-type-folder-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
index 8a4206ddd7..b9b0adb2f6 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap
@@ -8,34 +8,34 @@ exports[`CreateAndUpload component > action buttons > should show and be enabled
       <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="add" size="medium" type="span"></oc-icon-stub> <span>New</span>
     </button></div>
   <oc-drop-stub title="New file" closeonclick="true" dropid="new-file-menu-drop" isnestedelement="false" mode="click" offset="0,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#new-file-menu-btn" enforcedroponmobile="false" class="w-auto min-w-3xs">
-    <oc-list-stub raw="false" id="create-list" class="py-2 first:pt-0 last:pb-0">
+    <oc-list-stub raw="false" id="create-list" class="py-2 sm:first:pt-0 sm:last:pb-0">
       <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full" id="new-folder-btn">
           <!--v-if-->
           <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium" class="h-full"></resource-icon-stub> <span>Folder</span>
+          <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Folder</span>
         </button></li>
     </oc-list-stub>
-    <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0 border-t">
+    <oc-list-stub raw="false" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
       <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-txt">
           <!--v-if-->
           <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium" class="h-full"></resource-icon-stub> <span>Plain text file</span>
+          <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Plain text file</span>
           <!--v-if-->
         </button></li>
       <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-md">
           <!--v-if-->
           <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium" class="h-full"></resource-icon-stub> <span>Mark-down file</span>
+          <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Mark-down file</span>
           <!--v-if-->
         </button></li>
       <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-drawio">
           <!--v-if-->
           <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium" class="h-full"></resource-icon-stub> <span>Draw.io document</span>
+          <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Draw.io document</span>
           <!--v-if-->
         </button></li>
     </oc-list-stub>
-    <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0 border-t">
+    <oc-list-stub raw="false" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
       <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full" id="new-shortcut-btn">
           <!--v-if-->
           <!-- @slot Content of the button -->
@@ -45,7 +45,7 @@ exports[`CreateAndUpload component > action buttons > should show and be enabled
     </oc-list-stub>
   </oc-drop-stub> <span><button type="button" aria-label="Upload files or folders" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default" id="upload-menu-btn"><!--v-if--> <!-- @slot Content of the button --> <oc-icon-stub accessiblelabel="" color="" filltype="line" name="upload" size="medium" type="span"></oc-icon-stub> <span>Upload</span></button></span>
   <oc-drop-stub title="Upload" closeonclick="true" dropid="upload-menu-drop" isnestedelement="false" mode="click" offset="0,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#upload-menu-btn" enforcedroponmobile="false" class="w-auto min-w-3xs">
-    <oc-list-stub raw="false" id="upload-list">
+    <oc-list-stub raw="false" id="upload-list" class="py-2 sm:first:pt-0 sm:last:pb-0">
       <li>
         <resource-upload-stub btnlabel="" btnclass="w-full" isfolder="false"></resource-upload-stub>
       </li>
@@ -67,34 +67,34 @@ exports[`CreateAndUpload component > file handlers > should show entries for all
       <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="add" size="medium" type="span"></oc-icon-stub> <span>New</span>
     </button></div>
   <oc-drop-stub title="New file" closeonclick="true" dropid="new-file-menu-drop" isnestedelement="false" mode="click" offset="0,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#new-file-menu-btn" enforcedroponmobile="false" class="w-auto min-w-3xs">
-    <oc-list-stub raw="false" id="create-list" class="py-2 first:pt-0 last:pb-0">
+    <oc-list-stub raw="false" id="create-list" class="py-2 sm:first:pt-0 sm:last:pb-0">
       <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full" id="new-folder-btn">
           <!--v-if-->
           <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium" class="h-full"></resource-icon-stub> <span>Folder</span>
+          <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Folder</span>
         </button></li>
     </oc-list-stub>
-    <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0 border-t">
+    <oc-list-stub raw="false" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
       <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-txt">
           <!--v-if-->
           <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium" class="h-full"></resource-icon-stub> <span>Plain text file</span>
+          <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Plain text file</span>
           <!--v-if-->
         </button></li>
       <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-md">
           <!--v-if-->
           <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium" class="h-full"></resource-icon-stub> <span>Mark-down file</span>
+          <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Mark-down file</span>
           <!--v-if-->
         </button></li>
       <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full new-file-btn-drawio">
           <!--v-if-->
           <!-- @slot Content of the button -->
-          <resource-icon-stub resource="[object Object]" size="medium" class="h-full"></resource-icon-stub> <span>Draw.io document</span>
+          <resource-icon-stub resource="[object Object]" size="medium" class="[&amp;_svg]:h-5.5! sm:[&amp;_svg]:h-full"></resource-icon-stub> <span>Draw.io document</span>
           <!--v-if-->
         </button></li>
     </oc-list-stub>
-    <oc-list-stub raw="false" class="py-2 first:pt-0 last:pb-0 border-t">
+    <oc-list-stub raw="false" class="py-2 sm:first:pt-0 sm:last:pb-0 border-t">
       <li><button type="button" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-start text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default w-full" id="new-shortcut-btn">
           <!--v-if-->
           <!-- @slot Content of the button -->
@@ -104,7 +104,7 @@ exports[`CreateAndUpload component > file handlers > should show entries for all
     </oc-list-stub>
   </oc-drop-stub> <span><button type="button" aria-label="Upload files or folders" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default" id="upload-menu-btn"><!--v-if--> <!-- @slot Content of the button --> <oc-icon-stub accessiblelabel="" color="" filltype="line" name="upload" size="medium" type="span"></oc-icon-stub> <span>Upload</span></button></span>
   <oc-drop-stub title="Upload" closeonclick="true" dropid="upload-menu-drop" isnestedelement="false" mode="click" offset="0,0" paddingsize="small" popperoptions="[object Object]" position="bottom-start" toggle="#upload-menu-btn" enforcedroponmobile="false" class="w-auto min-w-3xs">
-    <oc-list-stub raw="false" id="upload-list">
+    <oc-list-stub raw="false" id="upload-list" class="py-2 sm:first:pt-0 sm:last:pb-0">
       <li>
         <resource-upload-stub btnlabel="" btnclass="w-full" isfolder="false"></resource-upload-stub>
       </li>