feat(modals): mark info modals and legal notice selectable

src/lib/components/AboutModal.svelte

@@ -49,7 +49,7 @@
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <div class="modal-backdrop" onclick={onClose} role="presentation">
     <!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
-    <div class="modal" onclick={(e) => e.stopPropagation()}>
+    <div class="modal selectable" onclick={(e) => e.stopPropagation()}>
       <!-- Header -->
       <div class="modal-header">
         <div class="app-branding">

src/lib/components/AlbumCreditsModal.svelte

@@ -173,7 +173,7 @@
   <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
   <div class="modal-overlay" onclick={onClose} role="presentation">
     <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <div class="credits-modal" role="dialog" aria-modal="true" tabindex="-1" onclick={(e) => e.stopPropagation()}>
+    <div class="credits-modal selectable" role="dialog" aria-modal="true" tabindex="-1" onclick={(e) => e.stopPropagation()}>
       {#if loading}
         <div class="loading-state">
           <LoaderCircle size={32} class="spinner" />

src/lib/components/BookletViewer.svelte

@@ -305,7 +305,7 @@
     </div>
 
     <!-- Content -->
-    <div class="booklet-content" bind:this={containerEl}>
+    <div class="booklet-content selectable" bind:this={containerEl}>
       {#if isLoading}
         <div class="booklet-loading">
           <div class="spinner"></div>

src/lib/components/DiagnosticsPanel.svelte

@@ -461,7 +461,7 @@
   }
 </script>
 
-<div class="diagnostics-panel">
+<div class="diagnostics-panel selectable">
   <button class="section-toggle panel-toggle" onclick={togglePanel}>
     {#if panelOpen}<ChevronDown size={14} />{:else}<ChevronRight size={14} />{/if}
     <h4 class="subsection-title" style="margin:0">{$t('settings.developer.diagnostics.title')}</h4>

src/lib/components/KeyboardShortcutsModal.svelte

@@ -90,7 +90,7 @@
   >
     <!-- svelte-ignore a11y_click_events_have_key_events -->
     <div
-      class="modal"
+      class="modal selectable"
       role="dialog"
       aria-modal="true"
       aria-labelledby="shortcuts-modal-title"

src/lib/components/MusicianModal.svelte

@@ -71,7 +71,7 @@
   aria-labelledby="musician-modal-title"
   tabindex="-1"
 >
-  <div class="modal">
+  <div class="modal selectable">
     <!-- Header -->
     <div class="modal-header">
       <div class="musician-info">

src/lib/components/QobuzLegalNotice.svelte

@@ -23,7 +23,7 @@
   const TERMS_URL = 'https://www.qobuz.com/us-en/legal/terms';
 </script>
 
-<div class={`qobuz-legal ${className}`}>
+<div class={`qobuz-legal selectable ${className}`}>
   {#if showBrandingLine}
     <p class="branding-line">
       {$t('legal.brandingLine')}
@@ -74,7 +74,6 @@
     font-size: 12px;
     color: var(--text-muted);
     line-height: 1.4;
-    user-select: none;
   }
 
   .tos-line input {

src/lib/components/TrackInfoModal.svelte

@@ -169,7 +169,7 @@
   <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
   <div class="modal-overlay" onclick={onClose} role="presentation">
     <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
-    <div class="track-modal" onclick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" tabindex="-1">
+    <div class="track-modal selectable" onclick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" tabindex="-1">
       {#if loading}
         <div class="loading-state">
           <LoaderCircle size={32} class="spinner" />

src/lib/components/immersive/panels/TrackInfoPanel.svelte

@@ -137,7 +137,7 @@
   );
 </script>
 
-<div class="track-info-panel" class:centered-layout={centeredLayout}>
+<div class="track-info-panel selectable" class:centered-layout={centeredLayout}>
   {#if loading}
     <div class="loading-state">
       <LoaderCircle size={28} class="spinner" />