green minimize

Author: ZacharyLeahan

src/components/GardenPlanner.vue

@@ -8,6 +8,7 @@
         :can-undo="canUndo"
         :can-redo="canRedo"
         :can-clear="placedPlants.length > 0"
+        :can-fit-to-plants="canFitToPlants"
         :summary-active="showSummary"
         :zoom="zoom"
         :grid-width="gridWidth"
@@ -21,6 +22,7 @@
         @import="showDesignImport = true"
         @toggle-summary="handleSummaryToggle"
         @toggle-3d="toggle3D"
+        @fit-to-plants="handleGridSizeFit"
         @open-grid-editor="showGridEditor = true"
         @toggle-snap="toggleSnapIncrement"
         @zoom-out="zoom = Math.max(zoom - 0.1, 0.5)"
@@ -377,6 +379,10 @@ const summaryData = computed(() => {
 
 // Grid editor handlers
 const minGridSize = computed(() => getMinGridSize());
+const canFitToPlants = computed(() => {
+  const min = minGridSize.value;
+  return placedPlants.value.length > 0 && (gridWidth.value > min.width || gridHeight.value > min.height);
+});
 
 const handleGridSizeApply = (width: number, height: number) => {
   const result = setGridSize(width, height);

src/components/PlannerToolbar.vue

@@ -90,6 +90,18 @@
           </button>
         </div>
 
+        <button
+          v-if="canFitToPlants"
+          class="toolbar-button fit-button icon-only"
+          type="button"
+          @click="$emit('fit-to-plants')"
+          title="Use minimum grid size (trim whitespace)"
+          aria-label="Use minimum grid size"
+        >
+          <Minimize2 :size="16" class="icon" />
+          <span class="button-text">Use minimum</span>
+        </button>
+
         <button
           class="toolbar-button grid-dimensions-button"
           @click="$emit('open-grid-editor')"
@@ -136,6 +148,7 @@ import {
   Upload,
   Grid3x3,
   Tag,
+  Minimize2,
 } from 'lucide-vue-next';
 
 type LabelMode = 'off' | 'all';
@@ -145,6 +158,7 @@ const props = defineProps<{
   canUndo: boolean;
   canRedo: boolean;
   canClear: boolean;
+  canFitToPlants?: boolean;
   summaryActive?: boolean;
   zoom: number;
   gridWidth: number;
@@ -161,6 +175,7 @@ defineEmits<{
   (e: 'import'): void;
   (e: 'toggle-summary'): void;
   (e: 'toggle-3d'): void;
+  (e: 'fit-to-plants'): void;
   (e: 'open-grid-editor'): void;
   (e: 'toggle-snap'): void;
   (e: 'zoom-in'): void;
@@ -299,6 +314,18 @@ const labelsLabel = computed(() => {
   border-color: #15803d;
 }
 
+.toolbar-button.fit-button {
+  color: #16a34a;
+  border-color: #16a34a;
+  background-color: transparent;
+}
+
+.toolbar-button.fit-button:hover:not(:disabled) {
+  background-color: rgba(22, 163, 74, 0.10);
+  border-color: #15803d;
+  color: #15803d;
+}
+
 .snap-toggle-button {
   font-family: 'Roboto Mono', monospace;
 }