feat: Modal updates

web/src/app/admin/configuration/llm/forms/components/FormWrapper.tsx

@@ -120,9 +120,7 @@ export function ProviderFormEntrypointWrapper({
                 title={`Setup ${providerName}`}
                 onClose={onClose}
               />
-              <Modal.Body className="max-h-[70vh] overflow-y-auto">
-                {children(context)}
-              </Modal.Body>
+              <Modal.Body>{children(context)}</Modal.Body>
             </Modal.Content>
           </Modal>
         )}
@@ -208,9 +206,7 @@ export function ProviderFormEntrypointWrapper({
               }`}
               onClose={onClose}
             />
-            <Modal.Body className="max-h-[70vh] overflow-y-auto">
-              {children(context)}
-            </Modal.Body>
+            <Modal.Body>{children(context)}</Modal.Body>
           </Modal.Content>
         </Modal>
       )}

web/src/app/admin/configuration/search/UpgradingPage.tsx

@@ -142,7 +142,7 @@ export default function UpgradingPage({
                 previous model and all progress will be lost.
               </div>
             </Modal.Body>
-            <Modal.Footer className="p-4 flex gap-x-2 w-full justify-end">
+            <Modal.Footer>
               <Button onClick={onCancel}>Confirm</Button>
               <Button onClick={() => setIsCancelling(false)} secondary>
                 Cancel

web/src/app/admin/configuration/web-search/WebProviderSetupModal.tsx

@@ -239,7 +239,7 @@ export const WebProviderSetupModal = memo(
               </FormField>
             )}
           </Modal.Body>
-          <Modal.Footer className="gap-2">
+          <Modal.Footer>
             <Button type="button" main secondary onClick={onClose}>
               Cancel
             </Button>

web/src/app/admin/configuration/web-search/page.tsx

@@ -935,7 +935,6 @@ export default function Page() {
                                 provider
                               );
                             }}
-                            className="h-6 w-6 opacity-70 hover:opacity-100"
                             aria-label={`Edit ${label}`}
                           />
                         )}
@@ -1134,7 +1133,6 @@ export default function Page() {
                                 provider
                               );
                             }}
-                            className="h-6 w-6 opacity-70 hover:opacity-100"
                             aria-label={`Edit ${label}`}
                           />
                         )}

web/src/app/admin/connector/[ccPairId]/IndexAttemptErrorsModal.tsx

@@ -136,7 +136,7 @@ export default function IndexAttemptErrorsModal({
           }
           onClose={onClose}
         />
-        <Modal.Body className="flex flex-col gap-4 min-h-0">
+        <Modal.Body>
           {!isResolvingErrors && (
             <div className="flex flex-col gap-2 flex-shrink-0">
               <Text as="p">

web/src/app/admin/connector/[ccPairId]/InlineFileManagement.tsx

@@ -360,7 +360,7 @@ export function InlineFileManagement({
             description="When you save these changes, the following will happen:"
           />
 
-          <Modal.Body className="px-6 space-y-3">
+          <Modal.Body>
             {selectedFilesToRemove.size > 0 && (
               <div className="p-3 bg-red-50 dark:bg-red-900/10 rounded-md">
                 <Text
@@ -402,7 +402,7 @@ export function InlineFileManagement({
             )}
           </Modal.Body>
 
-          <Modal.Footer className="p-6 pt-4">
+          <Modal.Footer>
             <Button
               onClick={() => setShowSaveConfirm(false)}
               secondary

web/src/app/admin/embeddings/RerankingFormPage.tsx

@@ -339,7 +339,7 @@ const RerankingDetailsForm = forwardRef<
                           better performance.
                         </p>
                       </Modal.Body>
-                      <Modal.Footer className="p-4 flex justify-end">
+                      <Modal.Footer>
                         <Button
                           onClick={() => setShowGpuWarningModalModel(null)}
                         >
@@ -433,7 +433,7 @@ const RerankingDetailsForm = forwardRef<
                           />
                         </div>
                       </Modal.Body>
-                      <Modal.Footer className="p-4 flex w-full justify-end">
+                      <Modal.Footer>
                         <Button
                           onClick={() => {
                             setShowLiteLLMConfigurationModal(false);
@@ -513,7 +513,7 @@ const RerankingDetailsForm = forwardRef<
                           />
                         </div>
                       </Modal.Body>
-                      <Modal.Footer className="p-4 flex w-full justify-end">
+                      <Modal.Footer>
                         <Button onClick={() => setIsApiKeyModalOpen(false)}>
                           Update
                         </Button>

web/src/app/admin/embeddings/modals/InstantSwitchConfirmModal.tsx

@@ -29,7 +29,7 @@ export default function InstantSwitchConfirmModal({
             <strong>This is not reversible.</strong>
           </Text>
         </Modal.Body>
-        <Modal.Footer className="p-4 gap-2">
+        <Modal.Footer>
           <Button onClick={onConfirm}>Confirm</Button>
           <Button secondary onClick={onClose}>
             Cancel

web/src/app/admin/embeddings/modals/ModelSelectionModal.tsx

@@ -55,7 +55,7 @@ export default function ModelSelectionConfirmationModal({
             </Callout>
           )}
         </Modal.Body>
-        <Modal.Footer className="p-4 gap-2 justify-end">
+        <Modal.Footer>
           <Button onClick={onConfirm}>Confirm</Button>
           <Button secondary onClick={onCancel}>
             Cancel

web/src/app/admin/embeddings/modals/SelectModelModal.tsx

@@ -30,7 +30,7 @@ export default function SelectModelModal({
             you will need to undergo a complete re-indexing. Are you sure?
           </Text>
         </Modal.Body>
-        <Modal.Footer className="p-4 gap-2 justify-end">
+        <Modal.Footer>
           <Button onClick={onConfirm}>Confirm</Button>
           <Button secondary onClick={onCancel}>
             Cancel

web/src/app/admin/oauth-configs/OAuthConfigForm.tsx

@@ -60,7 +60,7 @@ export const OAuthConfigForm = ({
         }
       }}
     >
-      <Modal.Content medium className="w-[60%] max-h-[80vh]">
+      <Modal.Content medium>
         <Modal.Header
           icon={SvgKey}
           title={
@@ -158,7 +158,7 @@ export const OAuthConfigForm = ({
         >
           {({ isSubmitting }) => (
             <Form className="w-full overflow-visible">
-              <Modal.Body className="overflow-y-auto px-6 w-full">
+              <Modal.Body>
                 <Separator noPadding />
 
                 <Text>
@@ -251,7 +251,7 @@ export const OAuthConfigForm = ({
                   autoCompleteDisabled={true}
                 />
               </Modal.Body>
-              <Modal.Footer className="w-full">
+              <Modal.Footer>
                 <Button
                   type="button"
                   onClick={onClose}

web/src/app/admin/settings/SettingsForm.tsx

@@ -320,7 +320,7 @@ export function SettingsForm() {
                 anyone to use Onyx without signing in.
               </p>
             </Modal.Body>
-            <Modal.Footer className="p-4 flex justify-end gap-2">
+            <Modal.Footer>
               <Button secondary onClick={() => setShowConfirmModal(false)}>
                 Cancel
               </Button>

web/src/app/chat/components/ChatPopup.tsx

@@ -79,7 +79,7 @@ export function ChatPopup() {
           icon={headerIcon}
           title={popupTitle || "Welcome to Onyx!"}
         />
-        <Modal.Body className="bg-background-tint-01 py-4">
+        <Modal.Body>
           <div className="overflow-y-auto text-left">
             <ReactMarkdown
               className="prose prose-neutral dark:prose-invert max-w-full"

web/src/app/chat/components/modal/FeedbackModal.tsx

@@ -111,15 +111,15 @@ export default function FeedbackModal({
               ))}
             </div>
           )}
-          <Modal.Body className="items-center justify-center bg-background-tint-01">
+          <Modal.Body>
             <FieldInput
               label="Feedback"
               placeholder={`What did you ${feedbackType} about this response?`}
               className="!w-full"
               ref={fieldInputRef}
             />
           </Modal.Body>
-          <Modal.Footer className="flex flex-row p-4 items-center justify-end w-full gap-2">
+          <Modal.Footer>
             <Button onClick={() => modal.toggle(false)} secondary>
               Cancel
             </Button>

web/src/app/css/z-index.css

@@ -7,7 +7,6 @@
   /* Interactive overlays */
   --z-modal-overlay: 900;
   --z-modal: 1000;
-  --z-confirmation: 1050;
   --z-toast: 1100;
   --z-popover: 1200;
   --z-tooltip: 1300;
@@ -31,9 +30,6 @@
 .z-modal {
   z-index: var(--z-modal);
 }
-.z-confirmation {
-  z-index: var(--z-confirmation);
-}
 .z-toast {
   z-index: var(--z-toast);
 }

web/src/components/chat/TextView.tsx

@@ -201,10 +201,9 @@ export default function TextView({
       }}
     >
       <Modal.Content
-        medium
+        large
         preventAccidentalClose={false}
         onOpenAutoFocus={(e) => e.preventDefault()}
-        className="overflow-hidden h-[80dvh] max-h-[calc(100dvh-4rem)]"
       >
         <div className="relative flex flex-row items-center gap-2 p-4 shadow-01">
           <SvgFileText className="w-[1.5rem] h-[1.5rem] stroke-text-04 shrink-0" />
@@ -242,7 +241,7 @@ export default function TextView({
           </div>
         </div>
 
-        <Modal.Body className="p-0 flex-1 min-h-0 overflow-hidden bg-background-tint-01">
+        <Modal.Body>
           {isLoading ? (
             <div className="flex flex-col items-center justify-center flex-1 min-h-0 p-6 gap-4">
               <SimpleLoader className="h-8 w-8" />

web/src/components/credentials/actions/ModifyCredential.tsx

@@ -202,7 +202,7 @@ export default function ModifyCredential({
                 delete credentials that are linked to live connectors.
               </Text>
             </Modal.Body>
-            <Modal.Footer className="p-4 gap-2 justify-end">
+            <Modal.Footer>
               <Button
                 onClick={async () => {
                   onDeleteCredential(confirmDeletionCredential);

web/src/components/health/healthcheck.tsx

@@ -192,7 +192,7 @@ export const HealthCheckBanner = () => {
               Your session has expired. Please log in again to continue.
             </p>
           </Modal.Body>
-          <Modal.Footer className="p-4 flex justify-end">
+          <Modal.Footer>
             <Button onClick={handleLogin}>Log In</Button>
           </Modal.Footer>
         </Modal.Content>

web/src/components/modals/AddInstructionModal.tsx

@@ -38,14 +38,14 @@ export default function AddInstructionModal() {
           description="Instruct specific behaviors, focus, tones, or formats for the response in this project."
           onClose={() => modal.toggle(false)}
         />
-        <Modal.Body className="bg-background-tint-01 p-4">
+        <Modal.Body>
           <InputTextarea
             value={instructionText}
             onChange={(event) => setInstructionText(event.target.value)}
             placeholder="Think step by step and show reasoning for complex problems. Use specific examples."
           />
         </Modal.Body>
-        <Modal.Footer className="flex flex-row justify-end gap-2 p-4 w-full">
+        <Modal.Footer>
           <Button secondary onClick={() => modal.toggle(false)}>
             Cancel
           </Button>

web/src/components/modals/CreateProjectModal.tsx

@@ -42,14 +42,14 @@ export default function CreateProjectModal() {
           description="Use projects to organize your files and chats in one place, and add custom instructions for ongoing work."
           onClose={() => modal.toggle(false)}
         />
-        <Modal.Body className="flex flex-col p-4 bg-background-tint-01">
+        <Modal.Body>
           <FieldInput
             label="Project Name"
             placeholder="What are you working on?"
             ref={fieldInputRef}
           />
         </Modal.Body>
-        <Modal.Footer className="flex flex-row justify-end gap-2 p-4 w-full">
+        <Modal.Footer>
           <Button secondary onClick={() => modal.toggle(false)}>
             Cancel
           </Button>

web/src/components/modals/ExceptionTraceModal.tsx

@@ -22,7 +22,7 @@ export default function ExceptionTraceModal({
           title="Full Exception Trace"
           onClose={onOutsideClick}
         />
-        <Modal.Body className="overflow-y-auto overflow-x-hidden pr-3 max-h-[70vh]">
+        <Modal.Body>
           <div className="mb-6">
             {!copyClicked ? (
               <button

web/src/components/modals/ProviderModal.tsx

@@ -72,12 +72,10 @@ export default function ProviderModal({
           onClose={() => onOpenChange(false)}
         />
 
-        <Modal.Body className="flex-1 overflow-y-auto bg-background-tint-01">
-          {children}
-        </Modal.Body>
+        <Modal.Body>{children}</Modal.Body>
 
         {onSubmit && (
-          <Modal.Footer className="flex justify-end gap-2 p-4 ">
+          <Modal.Footer>
             <Button type="button" secondary onClick={() => onOpenChange(false)}>
               {cancelLabel}
             </Button>