feat: Implement validation error message display for required fields

- Added a new CSS class for displaying validation error messages below required input fields without affecting layout.
- Enhanced the `useDialogAutoValidation` hook to insert error messages dynamically when required fields are empty.
- Implemented logic to remove error messages when the input is cleared, improving user feedback during form validation.

Made-with: Cursor

frontend/components/layout/TabBar.tsx

@@ -20,7 +20,6 @@ const DRAG_THRESHOLD = 5;
 const SETTLE_MS = 70;
 const DROP_SETTLE_MS = 180;
 const BAR_PAD_X = 8;
-const ACTIVE_TAB_BORDER_OPACITY = 0.3;
 
 interface DragState {
   tabId: string;
@@ -502,7 +501,7 @@ export function TabBar() {
           touchAction: "none",
           ...animStyle,
           ...(hiddenByGhost ? { opacity: 0 } : {}),
-          ...(isActive ? { borderColor: `rgba(0,0,0,${ACTIVE_TAB_BORDER_OPACITY})` } : {}),
+          ...(isActive ? { boxShadow: "0 -1px 28px rgba(0,0,0,0.9)" } : {}),
         }}
         title={tab.title}
       >