Refactor Dialog width props and remove classnames types

Replaces the Dialog 'width' and 'maxWidth' props with a 'className' prop for width customization, updating usage in Capture and PrintModal components. Removes '@types/classnames' from dependencies as it is no longer needed.

Author: bobsingor

pnpm-lock.yaml

@@ -62,7 +62,6 @@
     "@rollup/plugin-typescript": "^12.3.0",
     "@rollup/plugin-url": "^8.0.1",
     "@tailwindcss/postcss": "^4.1.17",
-    "@types/classnames": "^2.3.1",
     "@types/node": "^20.5.4",
     "@types/react": "^18.2.0",
     "@types/uuid": "^9.0.2",

viewers/snippet/package.json

@@ -79,7 +79,12 @@ export function Capture({ documentId }: CaptureProps) {
 
   return (
     <>
-      <Dialog open={open} onClose={handleClose} width="48rem" title={translate('capture.title')}>
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        title={translate('capture.title')}
+        className="md:w-[48rem]"
+      >
         <div className="space-y-6">
           <div className="flex justify-center">
             {previewUrl && (

viewers/snippet/src/components/capture.tsx

@@ -96,12 +96,14 @@ export function PrintModal({ documentId, isOpen, onClose, onExited }: PrintModal
       title={translate('print.title')}
       onClose={onClose}
       onExited={onExited}
-      maxWidth="32rem"
+      className="md:w-[32rem]"
     >
       <div className="space-y-6">
         {/* Pages to print */}
         <div>
-          <label className="text-fg-secondary mb-3 block text-sm font-medium">{translate('print.pages')}</label>
+          <label className="text-fg-secondary mb-3 block text-sm font-medium">
+            {translate('print.pages')}
+          </label>
           <div className="space-y-2">
             <label className="flex items-center">
               <input
@@ -126,7 +128,9 @@ export function PrintModal({ documentId, isOpen, onClose, onExited }: PrintModal
                 disabled={isLoading}
                 className="accent-accent mr-2"
               />
-              <span className="text-fg-primary text-sm">{translate('print.current', {params: {currentPage}})}</span>
+              <span className="text-fg-primary text-sm">
+                {translate('print.current', { params: { currentPage } })}
+              </span>
             </label>
 
             <label className="flex items-start">
@@ -140,7 +144,9 @@ export function PrintModal({ documentId, isOpen, onClose, onExited }: PrintModal
                 className="accent-accent mr-2 mt-0.5"
               />
               <div className="flex-1">
-                <span className="text-fg-primary mb-1 block text-sm">{translate('print.specify')}</span>
+                <span className="text-fg-primary mb-1 block text-sm">
+                  {translate('print.specify')}
+                </span>
                 <input
                   type="text"
                   placeholder={translate('print.specifyEG')}
@@ -155,7 +161,7 @@ export function PrintModal({ documentId, isOpen, onClose, onExited }: PrintModal
                 />
                 {selection === 'custom' && customPages.trim() && totalPages > 0 && (
                   <p className="text-fg-muted mt-1 text-xs">
-                    {translate('print.current', {params: {totalPages}})}
+                    {translate('print.current', { params: { totalPages } })}
                   </p>
                 )}
               </div>
@@ -173,7 +179,9 @@ export function PrintModal({ documentId, isOpen, onClose, onExited }: PrintModal
               disabled={isLoading}
               className="accent-accent mr-2"
             />
-            <span className="text-fg-secondary text-sm font-medium">{translate('print.annotation')}</span>
+            <span className="text-fg-secondary text-sm font-medium">
+              {translate('print.annotation')}
+            </span>
           </label>
         </div>
 

viewers/snippet/src/components/print-modal.tsx

@@ -1,6 +1,7 @@
 /** @jsxImportSource preact */
 import { h, ComponentChildren } from 'preact';
 import { useEffect, useRef, useState } from 'preact/hooks';
+import { twMerge } from 'tailwind-merge';
 import { Icon } from './icon';
 import { Button } from './button';
 
@@ -19,10 +20,6 @@ export interface DialogProps {
   className?: string;
   /** Whether to show close button */
   showCloseButton?: boolean;
-  /** Maximum width of the dialog */
-  maxWidth?: string;
-  /** width of the dialog */
-  width?: string;
 }
 
 export function Dialog({
@@ -33,8 +30,6 @@ export function Dialog({
   onExited,
   className,
   showCloseButton = true,
-  maxWidth = '32rem',
-  width,
 }: DialogProps) {
   const overlayRef = useRef<HTMLDivElement>(null);
   const [shouldRender, setShouldRender] = useState(open);
@@ -104,10 +99,11 @@ export function Dialog({
       onClick={handleBackdropClick}
     >
       <div
-        className={`bg-bg-surface md:border-border-subtle relative flex h-full w-full flex-col transition-all duration-200 md:h-auto md:w-[28rem] md:max-w-[90vw] md:rounded-lg md:border md:shadow-lg ${
-          isAnimating && open ? 'scale-100 opacity-100' : 'scale-95 opacity-0'
-        } ${className}`}
-        style={`${width ? 'width:' + width : ''}`}
+        className={twMerge(
+          'bg-bg-surface md:border-border-subtle relative flex h-full w-full flex-col transition-all duration-200 md:h-auto md:w-[28rem] md:max-w-[90vw] md:rounded-lg md:border md:shadow-lg',
+          isAnimating && open ? 'scale-100 opacity-100' : 'scale-95 opacity-0',
+          className,
+        )}
         onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}