diff --git a/app/assets/javascripts/design_management/pages/index.vue b/app/assets/javascripts/design_management/pages/index.vue
index 0f2afb779fde906abac7eba7474b58c39138f1a3..c73c8fb6ca4cac929f2cfaff30bc88c9b87991fc 100644
--- a/app/assets/javascripts/design_management/pages/index.vue
+++ b/app/assets/javascripts/design_management/pages/index.vue
@@ -347,15 +347,20 @@ export default {
   >
     <header
       v-if="showToolbar"
-      class="row-content-block gl-border-t-0 gl-p-3 gl-display-flex"
+      class="row-content-block gl-border-t-0 gl-py-3 gl-display-flex"
       data-testid="design-toolbar-wrapper"
     >
-      <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-w-full">
-        <div>
+      <div
+        class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-w-full gl-flex-wrap"
+      >
+        <div class="gl-display-flex gl-align-items-center gl-my-2">
           <span class="gl-font-weight-bold gl-mr-3">{{ s__('DesignManagement|Designs') }}</span>
           <design-version-dropdown />
         </div>
-        <div v-show="hasDesigns" class="qa-selector-toolbar gl-display-flex gl-align-items-center">
+        <div
+          v-show="hasDesigns"
+          class="qa-selector-toolbar gl-display-flex gl-align-items-center gl-my-2"
+        >
           <gl-button
             v-if="isLatestVersion"
             variant="link"
diff --git a/changelogs/unreleased/fix-overflowing-design-buttons.yml b/changelogs/unreleased/fix-overflowing-design-buttons.yml
new file mode 100644
index 0000000000000000000000000000000000000000..7e01779f438fe21adc11f9be708d04a2c60a1642
--- /dev/null
+++ b/changelogs/unreleased/fix-overflowing-design-buttons.yml
@@ -0,0 +1,5 @@
+---
+title: Fix overflowing design buttons on mobile
+merge_request: 54381
+author:
+type: fixed