Fix UI styling consistency for Pattern Length, Note Speed, and Delay Timing sections

- Unify button styling across all sections using consistent apply_button_style method
- Fix Pattern Length buttons to use proper orange/normal styling
- Fix Note Speed buttons to use purple/normal styling consistently
- Change Delay Timing layout from grid to single horizontal row to prevent text cutoff
- Add purple and disabled button style types for timing controls
- Ensure all buttons are tracked for proper scaling support
- Remove hardcoded inline styles in favor of centralized styling system

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

gui/arpeggiator_controls.py

@@ -153,6 +153,32 @@ class ArpeggiatorControls(QWidget):
                     border: 1px solid #00aaff;
                 }}
             """)
+        elif style_type == "purple":
+            button.setStyleSheet(f"""
+                QPushButton {{
+                    background: #9933cc;
+                    color: white;
+                    font-size: {font_size}px;
+                    font-weight: bold;
+                    padding: {padding}px;
+                    border: 1px solid #bb55ee;
+                }}
+                QPushButton:hover {{
+                    background: #aa44dd;
+                    border: 1px solid #cc66ff;
+                }}
+            """)
+        elif style_type == "disabled":
+            button.setStyleSheet(f"""
+                QPushButton {{
+                    background: #2a2a2a;
+                    color: #666666;
+                    font-size: {font_size}px;
+                    font-weight: bold;
+                    padding: {padding}px;
+                    border: 1px solid #333333;
+                }}
+            """)
         else:  # normal
             button.setStyleSheet(f"""
                 QPushButton {{
@@ -190,6 +216,10 @@ class ArpeggiatorControls(QWidget):
                 self.apply_button_style(button, 12, "orange")
             elif "#0066cc" in current_style:
                 self.apply_button_style(button, 12, "blue")
+            elif "#9933cc" in current_style:
+                self.apply_button_style(button, 12, "purple")
+            elif "#2a2a2a" in current_style:
+                self.apply_button_style(button, 12, "disabled")
             else:
                 self.apply_button_style(button, 12, "normal")
     
@@ -458,15 +488,17 @@ class ArpeggiatorControls(QWidget):
             btn = QPushButton(str(i))
             btn.setFixedSize(30, 22)  # Smaller buttons for numbers
             btn.setCheckable(True)
-            btn.setStyleSheet("background: #3a3a3a; color: #ffffff; font-size: 12px; font-weight: bold; padding: 0px; border: 1px solid #555555;")
             btn.clicked.connect(lambda checked, length=i: self.on_pattern_length_clicked(length))
             
             if i == 8:  # Default to 8
                 btn.setChecked(True)
-                btn.setStyleSheet("background: #cc6600; color: white; font-size: 12px; font-weight: bold; padding: 0px; border: 1px solid #ee8800;")
+                self.apply_button_style(btn, 12, "orange")
+            else:
+                self.apply_button_style(btn, 12, "normal")
             
+            self.all_buttons.append(btn)
             self.pattern_length_buttons[i] = btn
-            length_layout.addWidget(btn, i // 8, i % 8)  # 2 rows of 8
+            length_layout.addWidget(btn, (i-1) // 8, (i-1) % 8)  # 2 rows of 8
         
         layout.addWidget(length_widget)
         
@@ -525,13 +557,15 @@ class ArpeggiatorControls(QWidget):
             btn = QPushButton(speed)
             btn.setFixedSize(50, 22)  # Taller buttons for better readability
             btn.setCheckable(True)
-            btn.setStyleSheet("background: #3a3a3a; color: #ffffff; font-size: 12px; font-weight: bold; padding: 0px; border: 1px solid #555555;")
             btn.clicked.connect(lambda checked, s=speed: self.on_speed_clicked(s))
             
             if speed == "1/8":
                 btn.setChecked(True)
-                btn.setStyleSheet("background: #9933cc; color: white; font-size: 12px; font-weight: bold; padding: 0px; border: 1px solid #bb55ee;")
+                self.apply_button_style(btn, 12, "purple")
+            else:
+                self.apply_button_style(btn, 12, "normal")
             
+            self.all_buttons.append(btn)
             self.speed_buttons[speed] = btn
             speed_layout.addWidget(btn)
         
@@ -604,35 +638,35 @@ class ArpeggiatorControls(QWidget):
         delay_length_layout.addWidget(self.delay_length_spin)
         delay_layout.addLayout(delay_length_layout)
         
-        # Delay timing buttons (same as note speed)
+        # Delay timing buttons - single row
         delay_timing_label = self.create_parameter_label_with_override("Delay Timing:", "delay_timing")
         delay_timing_label.setEnabled(False)
         delay_layout.addWidget(delay_timing_label)
         self.delay_timing_label = delay_timing_label
         
         delay_timing_widget = QWidget()
-        delay_timing_layout = QGridLayout(delay_timing_widget)
-        delay_timing_layout.setSpacing(0)
+        delay_timing_layout = QHBoxLayout(delay_timing_widget)
+        delay_timing_layout.setSpacing(0)  # NO spacing between buttons
         delay_timing_layout.setContentsMargins(0, 0, 0, 0)
         
         self.delay_timing_buttons = {}
         delay_speeds = ["1/8", "1/8T", "1/4", "1/4T", "1/2", "1/2T", "1/1", "2/1", "2/1T", "4/1", "4/1T"]
-        for i, speed in enumerate(delay_speeds):
+        for speed in delay_speeds:
             btn = QPushButton(speed)
-            btn.setFixedSize(35, 18)  # Slightly smaller to fit more
+            btn.setFixedSize(35, 22)  # Consistent height with other buttons
             btn.setCheckable(True)
-            btn.setStyleSheet("background: #2a2a2a; color: #666666; font-size: 9px; font-weight: bold; padding: 0px; border: 1px solid #333333;")
             btn.setEnabled(False)
             btn.clicked.connect(lambda checked, s=speed: self.on_delay_timing_clicked(s))
             
             if speed == "1/4":
                 btn.setChecked(True)
+                self.apply_button_style(btn, 10, "purple")
+            else:
+                self.apply_button_style(btn, 10, "disabled")
             
+            self.all_buttons.append(btn)
             self.delay_timing_buttons[speed] = btn
-            # Arrange in 2 rows (6 on top, 5 on bottom)
-            row = i // 6
-            col = i % 6
-            delay_timing_layout.addWidget(btn, row, col)
+            delay_timing_layout.addWidget(btn)
         
         delay_timing_widget.setEnabled(False)
         self.delay_timing_widget = delay_timing_widget
@@ -827,10 +861,10 @@ class ArpeggiatorControls(QWidget):
     def on_speed_clicked(self, speed):
         # Speed changes apply immediately (no armed state needed for timing)
         if self.current_speed in self.speed_buttons:
-            self.speed_buttons[self.current_speed].setStyleSheet("background: #3a3a3a; color: #ffffff; font-size: 12px; font-weight: bold; padding: 0px; border: 1px solid #555555;")
+            self.apply_button_style(self.speed_buttons[self.current_speed], 12, "normal")
         
         self.current_speed = speed
-        self.speed_buttons[speed].setStyleSheet("background: #9933cc; color: white; font-size: 12px; font-weight: bold; padding: 0px; border: 1px solid #bb55ee;")
+        self.apply_button_style(self.speed_buttons[speed], 12, "purple")
         
         if hasattr(self.arpeggiator, 'set_note_speed'):
             self.arpeggiator.set_note_speed(speed)
@@ -901,10 +935,10 @@ class ArpeggiatorControls(QWidget):
     def on_delay_timing_clicked(self, timing):
         """Handle delay timing button clicks"""
         if self.current_delay_timing in self.delay_timing_buttons:
-            self.delay_timing_buttons[self.current_delay_timing].setStyleSheet("background: #3a3a3a; color: #ffffff; font-size: 10px; font-weight: bold; padding: 0px; border: 1px solid #555555;")
+            self.apply_button_style(self.delay_timing_buttons[self.current_delay_timing], 10, "disabled")
         
         self.current_delay_timing = timing
-        self.delay_timing_buttons[timing].setStyleSheet("background: #9933cc; color: white; font-size: 10px; font-weight: bold; padding: 0px; border: 1px solid #bb55ee;")
+        self.apply_button_style(self.delay_timing_buttons[timing], 10, "purple")
         
         if hasattr(self.arpeggiator, 'set_delay_timing'):
             self.arpeggiator.set_delay_timing(timing)