Issue: Insert media dialog is cropped on smaller screens #617

src/dashboardWebView/components/Media/MediaSnippetForm.tsx

@@ -3,10 +3,10 @@ import { useRef } from 'react';
 import { useRecoilValue } from 'recoil';
 import { MediaInfo, Snippet } from '../../../models';
 import { ViewDataSelector } from '../../state';
-import { FormDialog } from '../Modals/FormDialog';
 import SnippetForm, { SnippetFormHandle } from '../SnippetsView/SnippetForm';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
+import { SnippetSlideOver } from './SnippetSlideOver';
 
 export interface IMediaSnippetFormProps {
   media: MediaInfo;
@@ -32,7 +32,7 @@ export const MediaSnippetForm: React.FunctionComponent<IMediaSnippetFormProps> =
   };
 
   return (
-    <FormDialog
+    <SnippetSlideOver
       title={l10n.t(LocalizationKey.dashboardMediaMediaSnippetFormFormDialogTitle, media.title || media.filename)}
       description={l10n.t(LocalizationKey.dashboardMediaMediaSnippetFormFormDialogDescription, media.title || media.filename)}
       isSaveDisabled={false}
@@ -48,6 +48,6 @@ export const MediaSnippetForm: React.FunctionComponent<IMediaSnippetFormProps> =
         selection={viewData?.data?.selection}
         onInsert={onInsert}
       />
-    </FormDialog>
+    </SnippetSlideOver>
   );
 };

src/dashboardWebView/components/Media/SnippetSlideOver.tsx

@@ -0,0 +1,104 @@
+import { Dialog, Transition } from '@headlessui/react';
+import { XIcon } from '@heroicons/react/outline';
+import * as React from 'react';
+import { Fragment, useRef } from 'react';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
+
+export interface ISnippetSlideOverProps {
+  title: string;
+  description: string;
+  okBtnText: string;
+  cancelBtnText: string;
+  isSaveDisabled: boolean;
+
+  dismiss: () => void;
+  trigger: () => void;
+}
+
+export const SnippetSlideOver: React.FunctionComponent<ISnippetSlideOverProps> = ({
+  title,
+  description,
+  okBtnText,
+  cancelBtnText,
+  isSaveDisabled,
+  dismiss,
+  trigger,
+  children
+}: React.PropsWithChildren<ISnippetSlideOverProps>) => {
+  const cancelButtonRef = useRef(null);
+
+  return (
+    <Transition.Root show={true} as={Fragment}>
+      <Dialog onClose={dismiss} as={'div' as any} className="fixed inset-0 overflow-hidden z-50">
+        <div className="absolute inset-0 overflow-hidden">
+          <Dialog.Overlay className={`absolute inset-0 transition-opacity bg-[var(--vscode-editor-background)] opacity-75`} />
+
+          <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
+            <Transition.Child
+              as={Fragment}
+              enter="transform transition ease-in-out duration-500 sm:duration-700"
+              enterFrom="translate-x-full"
+              enterTo="translate-x-0"
+              leave="transform transition ease-in-out duration-500 sm:duration-700"
+              leaveFrom="translate-x-0"
+              leaveTo="translate-x-full"
+            >
+              <div className="pointer-events-auto w-screen max-w-md">
+                <div className={`flex h-full flex-col overflow-y-scroll border-l pb-6 shadow-xl bg-[var(--vscode-sideBar-background)] border-[var(--frontmatter-border)]`}>
+                  <div className="py-6 sticky top-0 z-10 px-4 sm:px-6 bg-[var(--vscode-sideBar-background)]">
+                    <div className="flex items-start justify-between">
+                      <Dialog.Title className={`text-lg font-medium text-[var(--vscode-editor-foreground)]`}>
+                        {title}
+                      </Dialog.Title>
+                      <div className="ml-3 flex h-7 items-center">
+                        <button
+                          type="button"
+                          className={`focus:outline-none text-[var(--vscode-titleBar-inactiveForeground)] hover:text-[var(--vscode-titleBar-activeForeground)]`}
+                          onClick={dismiss}
+                        >
+                          <span className="sr-only">{l10n.t(LocalizationKey.dashboardMediaPanelClose)}</span>
+                          <XIcon className="h-6 w-6" aria-hidden="true" />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="relative flex-1 px-4 sm:px-6">
+                    <div className="space-y-4">
+                      <p className="text-sm">{description}</p>
+
+                      <div>
+                        {children}
+                      </div>
+
+                      <div className="my-6 sm:my-4 sm:flex sm:flex-row-reverse">
+                        <button
+                          type="button"
+                          className={`w-full inline-flex justify-center rounded shadow-sm px-4 py-2 text-base font-medium focus:outline-none sm:mt-0 sm:w-auto sm:text-sm sm:ml-3 bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)] hover:bg-[var(--vscode-button-hoverBackground)]`}
+                          onClick={() => trigger()}
+                          disabled={isSaveDisabled}
+                        >
+                          {okBtnText}
+                        </button>
+
+                        <button
+                          type="button"
+                          className={`mt-3 w-full inline-flex justify-center rounded shadow-sm px-4 py-2 text-base font-medium focus:outline-none sm:mt-0 sm:w-auto sm:text-sm bg-[var(--vscode-button-secondaryBackground)] text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]`}
+                          onClick={() => dismiss()}
+                          ref={cancelButtonRef}
+                        >
+                          {cancelBtnText}
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};

src/dashboardWebView/components/Modals/FormDialog.tsx

@@ -30,7 +30,7 @@ export const FormDialog: React.FunctionComponent<IFormDialogProps> = ({
   return (
     <Transition.Root show={true} as={Fragment}>
       <Dialog
-        className="fixed z-10 inset-0 overflow-y-auto"
+        className="fixed z-50 inset-0 overflow-y-auto"
         initialFocus={cancelButtonRef}
         onClose={() => dismiss()}
       >
@@ -65,7 +65,7 @@ export const FormDialog: React.FunctionComponent<IFormDialogProps> = ({
             leaveFrom="opacity-100 translate-y-0 sm:scale-100"
             leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
-            <div className={`inline-block align-bottom rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6 border-2 ${getColors(
+            <div className={`inline-block align-bottom rounded-lg px-4 pt-5 pb-4 text-left overflow-auto shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6 border-2 ${getColors(
               'bg-white dark:bg-vulcan-500 border-whisper-900',
               'bg-[var(--vscode-sideBar-background)] border-[var(--frontmatter-border)]'
             )