fix: detail view layout — gap at top and scroll cutoff at bottom

Three changes:

1. Added box-sizing: border-box to :host of explore-artist-details,
   explore-album-details, and artist-details. The light DOM rule
   .main-panel > * sets this but shadow DOM may not inherit it.

2. Changed .main-panel to display: flex; flex-direction: column.
   In block layout, a height:0 hidden view could affect the
   position of the detail view below it. In flex column layout,
   the hidden view (flex:0) collapses completely and the active
   view (flex:1) fills the remaining space.

3. Changed .main-panel > * from height:100% to flex:1; min-height:0.
   In a flex column, flex:1 correctly fills available space while
   min-height:0 allows the content to shrink below its intrinsic
   size (needed for overflow:hidden to work).

frontend/src/components/artist-details/artist-details.ts

@@ -42,6 +42,7 @@ export class ArtistDetails extends LitElement {
             flex-direction: column;
             overflow: hidden;
             height: 100%;
+            box-sizing: border-box;
         }
 
         /* ====================================

frontend/src/components/explore-album-details/explore-album-details.ts

@@ -90,6 +90,7 @@ export class ExploreAlbumDetails extends LitElement {
                 flex-direction: column;
                 overflow: hidden;
                 height: 100%;
+                box-sizing: border-box;
             }
 
             /* ── Header ── */

frontend/src/components/explore-artist-details/explore-artist-details.ts

@@ -111,6 +111,7 @@ export class ExploreArtistDetails extends LitElement {
                 flex-direction: column;
                 overflow: hidden;
                 height: 100%;
+                box-sizing: border-box;
             }
 
             /* ── Header ── */