fix(style): Correct split playbutton display

front/src/components/audio/PlayButton.vue

@@ -113,7 +113,7 @@ const isOpen = ref(false)
   <Popover v-if="!discrete && !iconOnly" v-model:open="isOpen">
     <Button
       v-if="!dropdownOnly"
-      v-bind="{outline: playable, disabled: !playable, solid: !playable}"
+      v-bind="{disabled: !playable, primary: playable}"
       split
       splitIcon="bi-caret-down-fill"
       :aria-label="labels.replacePlay"

front/src/components/library/ArtistBase.vue

@@ -134,13 +134,13 @@ watch(() => props.id, fetchData, { immediate: true })
               />
             </div>
             <div class="ui buttons">
-              <play-button
+              <PlayButton
                 :is-playable="isPlayable"
                 class="vibrant"
                 :artist="object"
               >
                 {{ t('components.library.ArtistBase.button.play') }}
-              </play-button>
+              </PlayButton>
             </div>
 
             <semantic-modal

front/src/components/ui/Button.vue

@@ -25,6 +25,8 @@ const props = defineProps<{
   splitTitle?: string  // Add this prop
   onSplitClick?: (...args: any[]) => void | Promise<void>  // Add click handler for split part
 
+  disabled?: boolean
+
   autofocus? : boolean
   ariaPressed? : true
 } & (ColorProps | DefaultProps)
@@ -58,7 +60,7 @@ onMounted(() => {
 </script>
 
 <template>
-<div v-if="split" class="funkwhale button-group">
+<div v-if="split" class="funkwhale split-button">
   <button
     ref="button"
     v-bind="{
@@ -68,6 +70,7 @@ onMounted(() => {
          align(props, { alignSelf:'start', alignText:'center' })(
     )))}"
     class="funkwhale button split-main"
+    :disabled="disabled || undefined"
     :aria-pressed="props.ariaPressed"
     :class="{
         'is-loading': isLoading,
@@ -133,24 +136,21 @@ onMounted(() => {
 
 <style lang="scss">
 .funkwhale {
-  &.button-group {
-    display: inline-flex;
+  &.split-button {
 
     .button {
       display: inline-flex; // Ensure consistent display
       align-items: center;
+
       &.split-main {
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
-        border-right: 1px solid var(--fw-color);
-        flex: 0 0 auto;
+        border-right: 1px solid var(--border-color);
       }
 
       &.split-toggle {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
-        padding: 8px;
-        flex: 0 0 auto;
       }
     }
   }
@@ -167,7 +167,7 @@ onMounted(() => {
     white-space: nowrap;
     justify-content: space-between;
     align-items: center;
-    gap: 10px;
+    cursor: pointer;
 
     padding: calc(var(--padding) / 2 - var(--shift-by)) var(--padding) calc(var(--padding) / 2 + var(--shift-by)) var(--padding);
     &.is-icon-only {