feat: Enhance modal button behavior and validation feedback

- Updated modal button handling to disable all buttons by default, with exceptions for specific button types (e.g., cancel, close, delete).
- Introduced a new validation mechanism that visually indicates empty required fields with red borders and error messages after a delay.
- Improved the `useDialogAutoValidation` hook to manage button states based on field validation, ensuring a smoother user experience.
- Added CSS animations to prevent flickering during validation state changes.

Made-with: Cursor

frontend/components/screen/InteractiveScreenViewerDynamic.tsx

@@ -1286,6 +1286,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
 
   const externalLabelComponent = needsExternalLabel ? (
     <label
+      htmlFor={component.id}
       className="text-sm font-medium leading-none"
       style={{
         fontSize: style?.labelFontSize || "14px",
@@ -1336,6 +1337,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
           isHorizLabel ? (
             <div style={{ position: "relative", width: "100%", height: "100%" }}>
               <label
+                htmlFor={component.id}
                 className="text-sm font-medium leading-none"
                 style={{
                   position: "absolute",