Explorar el Código

Fix spool form profile dropdown truncating long preset names (#534)

Long filament profile names were cut off because inline filament ID
codes consumed horizontal space in the dropdown. Remove the codes from
dropdown items (selected code still shown below the input) and widen
the modal from max-w-lg to max-w-xl.
maziggy hace 6 meses
padre
commit
4f5a9f4b95

+ 1 - 0
CHANGELOG.md

@@ -20,6 +20,7 @@ All notable changes to Bambuddy will be documented in this file.
 
 
 ### Improved
 ### Improved
 - **Queue API Returns More Print Metadata** ([#524](https://github.com/maziggy/bambuddy/issues/524)) — The `GET /api/v1/queue` and `GET /api/v1/queue/{id}` endpoints now include `filament_type`, `filament_color`, `layer_height`, `nozzle_diameter`, and `sliced_for_model` from the archive or library file. Previously these fields were only available via the archive endpoints, requiring an extra API call.
 - **Queue API Returns More Print Metadata** ([#524](https://github.com/maziggy/bambuddy/issues/524)) — The `GET /api/v1/queue` and `GET /api/v1/queue/{id}` endpoints now include `filament_type`, `filament_color`, `layer_height`, `nozzle_diameter`, and `sliced_for_model` from the archive or library file. Previously these fields were only available via the archive endpoints, requiring an extra API call.
+- **Spool Form Profile Dropdown Truncates Long Names** ([#534](https://github.com/maziggy/bambuddy/issues/534)) — Long filament profile names (e.g., "Polymaker Panchroma Matte PLA 0.4 nozzle P1S") were truncated in the spool creation form's preset dropdown because filament ID codes displayed alongside each name consumed horizontal space. Removed the inline filament codes from dropdown items (the selected code is still shown below the input after selection) and widened the modal from `max-w-lg` to `max-w-xl` to give profile names more room.
 
 
 ## [0.2.1b3] - 2026-02-23
 ## [0.2.1b3] - 2026-02-23
 
 

+ 1 - 1
frontend/src/components/SpoolFormModal.tsx

@@ -473,7 +473,7 @@ export function SpoolFormModal({ isOpen, onClose, spool, printersWithCalibration
         onClick={onClose}
         onClick={onClose}
       />
       />
 
 
-      <div className="relative w-full max-w-lg mx-4 bg-bambu-dark-secondary border border-bambu-dark-tertiary rounded-xl shadow-2xl max-h-[90vh] flex flex-col">
+      <div className="relative w-full max-w-xl mx-4 bg-bambu-dark-secondary border border-bambu-dark-tertiary rounded-xl shadow-2xl max-h-[90vh] flex flex-col">
         {/* Header */}
         {/* Header */}
         <div className="flex items-center justify-between p-4 border-b border-bambu-dark-tertiary flex-shrink-0">
         <div className="flex items-center justify-between p-4 border-b border-bambu-dark-tertiary flex-shrink-0">
           <h2 className="text-lg font-semibold text-white">
           <h2 className="text-lg font-semibold text-white">

+ 2 - 3
frontend/src/components/spool-form/FilamentSection.tsx

@@ -166,15 +166,14 @@ export function FilamentSection({
                     <button
                     <button
                       key={option.code}
                       key={option.code}
                       type="button"
                       type="button"
-                      className={`w-full px-3 py-2 text-left text-sm hover:bg-bambu-dark-tertiary flex justify-between items-center ${
+                      className={`w-full px-3 py-2 text-left text-sm hover:bg-bambu-dark-tertiary truncate ${
                         selectedPresetOption?.code === option.code
                         selectedPresetOption?.code === option.code
                           ? 'bg-bambu-green/10 text-bambu-green'
                           ? 'bg-bambu-green/10 text-bambu-green'
                           : 'text-white'
                           : 'text-white'
                       }`}
                       }`}
                       onClick={() => handlePresetSelect(option)}
                       onClick={() => handlePresetSelect(option)}
                     >
                     >
-                      <span className="truncate">{option.displayName}</span>
-                      <span className="font-mono text-xs text-bambu-gray ml-2 shrink-0">{option.code}</span>
+                      {option.displayName}
                     </button>
                     </button>
                   ))
                   ))
                 )}
                 )}

La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 0 - 0
static/assets/index-1Ts9jjQl.css


La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 0 - 0
static/assets/index-BzejadyD.js


La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 0 - 0
static/assets/index-DJjXosw8.css


+ 2 - 2
static/index.html

@@ -23,8 +23,8 @@
 
 
     <!-- Splash screens for iOS -->
     <!-- Splash screens for iOS -->
     <link rel="apple-touch-startup-image" href="/img/android-chrome-512x512.png" />
     <link rel="apple-touch-startup-image" href="/img/android-chrome-512x512.png" />
-    <script type="module" crossorigin src="/assets/index-BXXkRrQK.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-1Ts9jjQl.css">
+    <script type="module" crossorigin src="/assets/index-BzejadyD.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DJjXosw8.css">
   </head>
   </head>
   <body>
   <body>
     <div id="root"></div>
     <div id="root"></div>

Algunos archivos no se mostraron porque demasiados archivos cambiaron en este cambio