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.

CHANGELOG.md

@@ -20,6 +20,7 @@ All notable changes to Bambuddy will be documented in this file.
 
 ### 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.
+- **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
 

frontend/src/components/SpoolFormModal.tsx

@@ -473,7 +473,7 @@ export function SpoolFormModal({ isOpen, onClose, spool, printersWithCalibration
         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 */}
         <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">

frontend/src/components/spool-form/FilamentSection.tsx

@@ -166,15 +166,14 @@ export function FilamentSection({
                     <button
                       key={option.code}
                       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
                           ? 'bg-bambu-green/10 text-bambu-green'
                           : 'text-white'
                       }`}
                       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>
                   ))
                 )}

static/index.html

@@ -23,8 +23,8 @@
 
     <!-- Splash screens for iOS -->
     <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>
   <body>
     <div id="root"></div>