Update text file preview display

Remove scrollbars when showing previews.

packages/web-kitchensink-reactnext/src/categories/blob/react/components/AudioFilePreview/index.tsx

@@ -93,10 +93,12 @@ export const AudioFilePreview = React.forwardRef<AudioFilePreviewDerivedComponen
               className="w-full h-full bg-black flex flex-col items-stretch"
               data-testid="preview"
             >
-              <div className="w-full flex-auto relative">
+              <div
+                className="w-full flex-auto relative"
+                key={`${fileWithMetadata?.url ?? ''}:${fileWithMetadata?.type ?? ''}`}
+              >
                 <audio
                   {...etcProps}
-                  key={`${fileWithMetadata?.url ?? ''}:${fileWithMetadata?.type ?? ''}`}
                   controls={!enhanced}
                   ref={mediaControllerRef}
                   onLoadedMetadata={refreshControls}
@@ -115,7 +117,7 @@ export const AudioFilePreview = React.forwardRef<AudioFilePreviewDerivedComponen
                   <>
                     <WaveformCanvas
                       className={clsx(
-                        'sm:absolute w-full sm:h-full top-0 left-0 block object-center object-contain flex-auto aspect-video sm:aspect-auto bg-primary/10',
+                        'sm:absolute w-full sm:h-full top-0 left-0 block object-center object-contain flex-auto aspect-video sm:aspect-auto bg-primary/10 cursor-text',
                         visualizationMode !== 'waveform' && 'opacity-0',
                       )}
                       ref={mediaControllerRef}
@@ -164,7 +166,7 @@ export const AudioFilePreview = React.forwardRef<AudioFilePreviewDerivedComponen
                         />
                         <span
                           className={clsx(
-                            'block uppercase font-bold h-[1.1em] w-full whitespace-nowrap overflow-hidden text-ellipsis font-semi-expanded text-primary',
+                            'flex items-center uppercase font-bold h-full w-full whitespace-nowrap overflow-hidden text-ellipsis font-semi-expanded text-primary cursor-pointer',
                             'peer-focus/waveform:text-secondary',
                             'peer-active/waveform:text-tertiary',
                             'peer-checked/waveform:text-tertiary',
@@ -188,7 +190,7 @@ export const AudioFilePreview = React.forwardRef<AudioFilePreviewDerivedComponen
                         />
                         <span
                           className={clsx(
-                            'block uppercase font-bold h-[1.1em] w-full whitespace-nowrap overflow-hidden text-ellipsis font-semi-expanded text-primary',
+                            'flex items-center uppercase font-bold h-full w-full whitespace-nowrap overflow-hidden text-ellipsis font-semi-expanded text-primary cursor-pointer',
                             'peer-focus/waveform:text-secondary',
                             'peer-active/waveform:text-tertiary',
                             'peer-checked/waveform:text-tertiary',
@@ -299,7 +301,7 @@ export const AudioFilePreview = React.forwardRef<AudioFilePreviewDerivedComponen
                     </span>
                   </div>
                   <div
-                    className="flex-shrink-0 w-12"
+                    className="flex-shrink-0 w-12 flex items-center"
                   >
                     <Slider
                       ref={volumeRef}

packages/web-kitchensink-reactnext/src/categories/blob/react/components/VideoFilePreview/index.tsx

@@ -79,10 +79,12 @@ export const VideoFilePreview = React.forwardRef<VideoFilePreviewDerivedComponen
               className="w-full h-full bg-black flex flex-col items-stretch"
               data-testid="preview"
             >
-              <div className="w-full flex-auto relative">
+              <div
+                className="w-full flex-auto relative"
+                key={`${fileWithMetadata?.url ?? ''}:${fileWithMetadata?.type ?? ''}`}
+              >
                 <video
                   {...etcProps}
-                  key={`${fileWithMetadata?.url ?? ''}:${fileWithMetadata?.type ?? ''}`}
                   className="sm:absolute w-full sm:h-full top-0 left-0 block object-center object-contain flex-auto aspect-video sm:aspect-auto bg-primary/10"
                   ref={mediaControllerRef}
                   onLoadedMetadata={refreshControls}
@@ -208,7 +210,7 @@ export const VideoFilePreview = React.forwardRef<VideoFilePreviewDerivedComponen
                     </span>
                   </div>
                   <div
-                    className="flex-shrink-0 w-12"
+                    className="flex-shrink-0 w-12 flex items-center"
                   >
                     <Slider
                       ref={volumeRef}

packages/web-kitchensink-reactnext/src/categories/number/react/components/Slider/index.tsx

@@ -183,8 +183,9 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
           block && orient !== 'vertical' && 'w-full',
           !block && 'align-middle',
           className,
-          orient !== 'vertical' && 'inline-block min-w-[16rem] min-h-[1rem]',
+          orient !== 'vertical' && 'inline-block min-h-[1rem]',
           orient === 'vertical' && 'inline-block min-w-[1rem]',
+          orient !== 'vertical' && !block && 'min-w-[16rem]',
           //orient === 'vertical' && 'inline-block min-h-[16rem] min-w-[1rem]',
         )}
         style={style}

packages/web-kitchensink-reactnext/src/styles/globals.css

@@ -33,6 +33,10 @@
   align-items: flex-start;
 }
 
+.react-prism pre {
+  overflow: visible;
+}
+
 .react-prism .token.number { color: rgb(var(--color-code-number)); }
 .react-prism .token.keyword { color: rgb(var(--color-code-keyword)); }
 .react-prism .token.type { color: rgb(var(--color-code-type)); }
@@ -47,6 +51,10 @@
 .react-prism .token.global { color: rgb(var(--color-code-global)); }
 .react-prism .token.comment { opacity: 0.5; }
 
+.binary-file-preview pre {
+  overflow: visible;
+}
+
 .binary-file-preview .x00 { color: rgb(var(--color-code-keyword)); }
 .binary-file-preview .x10 { color: rgb(var(--color-code-global)); }
 .binary-file-preview .x20 { color: rgb(var(--color-code-string)); }