diff --git a/frontend/src/components/ShoppingList.css b/frontend/src/components/ShoppingList.css
index b5fa64c..6294d54 100644
--- a/frontend/src/components/ShoppingList.css
+++ b/frontend/src/components/ShoppingList.css
@@ -86,6 +86,12 @@
   cursor: not-allowed;
 }
 
+.clear-all-btn {
+  flex-shrink: 0;
+  max-width: 120px;
+  white-space: nowrap;
+}
+
 .shopping-list-content {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -328,6 +334,11 @@
     gap: 16px;
   }
   
+  .clear-all-btn {
+    max-width: none;
+    width: 100%;
+  }
+  
   .selected-recipe-item {
     flex-direction: column;
     align-items: stretch;
diff --git a/frontend/src/components/ShoppingList.tsx b/frontend/src/components/ShoppingList.tsx
index 0e10701..d78c15f 100644
--- a/frontend/src/components/ShoppingList.tsx
+++ b/frontend/src/components/ShoppingList.tsx
@@ -86,7 +86,7 @@ const ShoppingList: React.FC<ShoppingListProps> = ({ userSelection, onSelectionU
           <p>{userSelection.selectedRecipes.length} recipes • {getTotalRecipes()} total servings</p>
         </div>
         <button 
-          className="btn btn-danger"
+          className="btn btn-danger clear-all-btn"
           onClick={handleClearAll}
           disabled={loading}
         >