feat: move to npm package & small fixes

src/components/common/ConnectionStatus.tsx

@@ -1,4 +1,4 @@
-import { Badge, Tooltip } from 'modern-sk';
+import { Badge, Tooltip } from '@olly/modern-sk';
 import { useConnectionStatus } from '../../hooks/useConnectionStatus';
 import { getApiBaseUrl } from '../../config/runtime-config';
 

src/components/common/ErrorState.tsx

@@ -1,4 +1,4 @@
-import { Callout, Button } from 'modern-sk';
+import { Callout, Button } from '@olly/modern-sk';
 
 interface ErrorStateProps {
   message?: string;

src/components/player/PersistentPlayer.tsx

@@ -1,4 +1,4 @@
-import { Slider } from 'modern-sk';
+import { Slider } from '@olly/modern-sk';
 import { Icon } from '../common/Icon';
 import { ArtTile } from '../common/ArtTile';
 import { useAppDispatch, useAppSelector } from '../../hooks/useAppDispatch';

src/components/player/QueuePanel.tsx

@@ -1,4 +1,4 @@
-import { Slider, Badge } from 'modern-sk';
+import { Slider, Badge } from '@olly/modern-sk';
 import { Icon } from '../common/Icon';
 import { ArtTile } from '../common/ArtTile';
 import { useAppDispatch, useAppSelector } from '../../hooks/useAppDispatch';

src/components/track/AvailabilityBadge.tsx

@@ -1,4 +1,4 @@
-import { Badge, Tooltip } from 'modern-sk';
+import { Badge, Tooltip } from '@olly/modern-sk';
 import type { TrackAvailability } from '../../api/types';
 
 interface Props {

src/components/track/TrackContextMenu.tsx

@@ -5,7 +5,7 @@ import {
   MenuItem,
   MenuSeparator,
   IconButton,
-} from 'modern-sk';
+} from '@olly/modern-sk';
 import { useAppDispatch } from '../../hooks/useAppDispatch';
 import { addToQueue, addNextInQueue } from '../../store/slices/queue';
 import { play } from '../../store/slices/player';

src/components/track/TrackRow.tsx

@@ -1,4 +1,4 @@
-import { Row } from 'modern-sk';
+import { Row } from '@olly/modern-sk';
 import { TrackContextMenu } from './TrackContextMenu';
 import { AvailabilityBadge } from './AvailabilityBadge';
 import { formatDuration } from '../../lib/format';

src/features/admin/AdminPage.tsx

@@ -1,4 +1,4 @@
-import { Window } from 'modern-sk';
+import { Window } from '@olly/modern-sk';
 export function AdminPage() {
   return (
     <div style={{ padding: '1.5rem' }}>

src/features/album-detail/AlbumDetailPage.tsx

@@ -1,5 +1,5 @@
 import { useParams, useNavigate } from 'react-router';
-import { ScrollArea, IconButton, Button } from 'modern-sk';
+import { ScrollArea, IconButton, Button } from '@olly/modern-sk';
 import {
   useGetAlbumQuery,
   useGetAlbumTracksQuery,

src/features/connect/ConnectPage.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router';
-import { Card, TextField, Button, Callout, Badge } from 'modern-sk';
+import { Card, TextField, Button, Callout, Badge } from '@olly/modern-sk';
 import { Icon } from '../../components/common/Icon';
 import { useAppDispatch } from '../../hooks/useAppDispatch';
 import { setTokens, setUser } from '../../store/slices/auth';

src/features/downloads-manager/DownloadsManagerPage.tsx

@@ -1,4 +1,4 @@
-import { Window } from 'modern-sk';
+import { Window } from '@olly/modern-sk';
 export function DownloadsManagerPage() {
   return (
     <div style={{ padding: '1.5rem' }}>

src/features/home/HomePage.tsx

@@ -42,7 +42,7 @@ import {
   AlertDialog,
   Window,
   useTheme,
-} from 'modern-sk';
+} from '@olly/modern-sk';
 
 const sectionStyle: React.CSSProperties = {
   display: 'flex',

src/features/library/LibraryPage.tsx

@@ -7,7 +7,7 @@ import {
   SearchField,
   ScrollArea,
   Card,
-} from 'modern-sk';
+} from '@olly/modern-sk';
 import {
   useGetTracksQuery,
   useGetAlbumsQuery,

src/features/playlist-detail/PlaylistDetailPage.tsx

@@ -1,5 +1,5 @@
 import { useParams, useNavigate } from 'react-router';
-import { ScrollArea, IconButton, Button } from 'modern-sk';
+import { ScrollArea, IconButton, Button } from '@olly/modern-sk';
 import {
   useGetPlaylistQuery,
   useGetPlaylistTracksQuery,

src/features/search-download/SearchDownloadPage.tsx

@@ -1,4 +1,4 @@
-import { Window } from 'modern-sk';
+import { Window } from '@olly/modern-sk';
 export function SearchDownloadPage() {
   return (
     <div style={{ padding: '1.5rem' }}>

src/features/settings/SettingsPage.tsx

@@ -1,4 +1,4 @@
-import { Window } from 'modern-sk';
+import { Window } from '@olly/modern-sk';
 export function SettingsPage() {
   return (
     <div style={{ padding: '1.5rem' }}>

src/features/storage/StoragePage.tsx

@@ -1,4 +1,4 @@
-import { Window } from 'modern-sk';
+import { Window } from '@olly/modern-sk';
 export function StoragePage() {
   return (
     <div style={{ padding: '1.5rem' }}>

src/index.tsx

@@ -1,12 +1,12 @@
-import 'modern-sk/styles.css';
-import 'modern-sk/fonts.css';
+import '@olly/modern-sk/styles.css';
+import '@olly/modern-sk/fonts.css';
 import './styles/global.css';
 import './styles/shell.css';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router';
-import { ThemeProvider, TooltipProvider } from 'modern-sk';
+import { ThemeProvider, TooltipProvider } from '@olly/modern-sk';
 import { store } from './store';
 import { AppRoutes } from './routes';
 

src/styles/shell.css

@@ -53,12 +53,14 @@
   display: flex;
   flex-direction: column;
   min-height: 0;
+  overflow-x: hidden;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.22));
   border-right: 1px solid var(--hair);
 }
 .sb-scroll {
   flex: 1;
   min-height: 0; /* allow scroll inside the column flex so .sb-foot stays pinned */
+  overflow-x: hidden;
   overflow-y: auto;
   padding: 14px 12px 6px;
 }
@@ -90,6 +92,8 @@
   align-items: center;
   gap: 11px;
   width: 100%;
+  box-sizing: border-box;
+  min-width: 0;
   padding: 8px 10px;
   border-radius: var(--r-md);
   font-size: 14px;
@@ -107,6 +111,14 @@
 .nav-item .ph {
   font-size: 18px;
   color: var(--fg-3);
+  flex-shrink: 0;
+}
+.nav-item > span {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .nav-item:hover {
   background: rgba(255, 255, 255, 0.04);
@@ -150,6 +162,8 @@
   align-items: center;
   gap: 9px;
   width: 100%;
+  box-sizing: border-box;
+  min-width: 0;
   padding: 6px 10px;
   border-radius: var(--r-md);
   font-size: 13px;
@@ -263,9 +277,11 @@
 
 /* connection status pill (used in sidebar foot) */
 .conn {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: 7px;
+  width: 100%;
+  box-sizing: border-box;
   padding: 5px 11px 5px 9px;
   border-radius: var(--r-pill);
   font-size: 12px;