Fix assist dropdown button

src/components/ha-button.ts

@@ -26,7 +26,7 @@ export type Appearance = "accent" | "filled" | "plain";
  * @csspart spinner - The spinner that shows when the button is in the loading state.
  *
  * @cssprop --ha-button-font-family - Font family for the button text.
- * @cssprop --ha-font-weight-medium - Medium font weight for button text.
+ * @cssprop --ha-button-font-weight - buttons font weight.
  * @cssprop --ha-button-border-width - Border width for the button.
  * @cssprop --ha-button-theme-color - Main color for the button.
  * @cssprop --ha-button-theme-darker-color - Darker variant of the main color.
@@ -35,6 +35,8 @@ export type Appearance = "accent" | "filled" | "plain";
  * @cssprop --ha-button-border-radius - Border radius for the button.
  * @cssprop --ha-button-text-color - Text color for the button.
  * @cssprop --ha-button-font-size - Font weight for the button text.
+ * @cssprop --ha-button-padding-inline-start - padding for the button text on the left side.
+ * @cssprop --ha-button-padding-inline-end - padding for the button text on the right side.
  *
  * @attr {("small"|"medium")} size - Sets the button size.
  * @attr {("primary"|"danger"|"neutral"|"warning"|"success")} variant - Sets the button color variant. "primary" is default.
@@ -95,7 +97,7 @@ export class HaButton extends Button {
         --ha-button-theme-color: #545868;
         --ha-button-theme-darker-color: #373a44;
         --ha-button-theme-active-color: #1c1d22;
-        --ha-button-theme-lighter-color: #e4e5e9;
+        --ha-button-theme-lighter-color: #767986;
       }
 
       :host([variant="warning"]) {
@@ -180,20 +182,30 @@ export class HaButton extends Button {
         color: var(--white-color);
       }
 
+      .button.button--medium .button__label {
+        padding-inline-start: var(--ha-button-padding-inline-start, 16px);
+        padding-inline-end: var(--ha-button-padding-inline-start, 16px);
+      }
+
+      .button.button--small .button__label {
+        padding-inline-start: var(--ha-button-padding-inline-start, 12px);
+        padding-inline-end: var(--ha-button-padding-inline-start, 12px);
+      }
+
       /* spacing */
       .button--has-prefix.button--medium .button__label {
-        padding-inline-start: 8px;
+        padding-inline-start: var(--ha-button-padding-inline-start, 8px);
       }
       .button--has-prefix.button--small .button__label {
-        padding-inline-start: 4px;
+        padding-inline-start: var(--ha-button-padding-inline-start, 4px);
       }
       .button--has-suffix.button--medium .button__label,
       .button--caret.button--medium .button__label {
-        padding-inline-end: 8px;
+        padding-inline-end: var(--ha-button-padding-inline-end, 8px);
       }
       .button--has-suffix.button--small .button__label,
       .button--caret.button--small .button__label {
-        padding-inline-end: 4px;
+        padding-inline-end: var(--ha-button-padding-inline-end, 4px);
       }
 
       /*

src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts

@@ -10,14 +10,14 @@ import { customElement, property, state } from "lit/decorators";
 import { storage } from "../../common/decorators/storage";
 import { fireEvent } from "../../common/dom/fire_event";
 import { stopPropagation } from "../../common/dom/stop_propagation";
+import "../../components/ha-alert";
+import "../../components/ha-assist-chat";
 import "../../components/ha-button";
 import "../../components/ha-button-menu";
 import "../../components/ha-dialog";
 import "../../components/ha-dialog-header";
 import "../../components/ha-icon-button";
 import "../../components/ha-list-item";
-import "../../components/ha-alert";
-import "../../components/ha-assist-chat";
 import "../../components/ha-spinner";
 import type { AssistPipeline } from "../../data/assist_pipeline";
 import {
@@ -110,10 +110,15 @@ export class HaVoiceCommandDialog extends LitElement {
               activatable
               fixed
             >
-              <ha-button slot="trigger">
+              <ha-button
+                slot="trigger"
+                appearance="plain"
+                variant="neutral"
+                size="small"
+              >
                 ${this._pipeline?.name}
                 <ha-svg-icon
-                  slot="trailingIcon"
+                  slot="suffix"
                   .path=${mdiChevronDown}
                 ></ha-svg-icon>
               </ha-button>
@@ -269,19 +274,18 @@ export class HaVoiceCommandDialog extends LitElement {
           margin-inline-start: -8px;
         }
         ha-button-menu ha-button {
-          --mdc-theme-primary: var(--secondary-text-color);
+          --ha-button-theme-color: transparent;
-          --mdc-typography-button-text-transform: none;
+          --ha-button-text-color: var(--primary-text-color);
-          --mdc-typography-button-font-size: unset;
+          --ha-button-padding-inline-start: 8px;
-          --mdc-typography-button-font-weight: var(--ha-font-weight-normal);
+          --ha-button-font-weight: var(--ha-font-weight-normal);
-          --mdc-typography-button-letter-spacing: var(
+          --ha-button-border-radius: 4px;
-            --mdc-typography-headline6-letter-spacing,
+          --ha-button-theme-lighter-color: rgba(0, 0, 0, 0.1);
-            0.0125em
+          --ha-button-height: 24px;
-          );
+        }
-          --mdc-typography-button-line-height: var(
+        @media (prefers-color-scheme: dark) {
-            --mdc-typography-headline6-line-height,
+          ha-button-menu ha-button {
-            var(--ha-line-height-expanded)
+            --ha-button-theme-lighter-color: rgba(255, 255, 255, 0.1);
-          );
+          }
-          --button-height: auto;
         }
         ha-button-menu ha-button ha-svg-icon {
           height: 28px;