fix: markup and close volume modal on create

services/frontend/src/components/Modal/volume/CreateVolumeModal.tsx

@@ -26,6 +26,7 @@ const CreateVolumeModal = (props: ICreateVolumeModalProps) => {
   const handleCreate = useCallback((values: any, formik: any) => {
     onAddEndpoint(getFinalValues(values));
     formik.resetForm();
+    onHide();
   }, []);
 
   const initialValues = useMemo(() => getInitialValues(), []);
@@ -59,31 +60,32 @@ const CreateVolumeModal = (props: ICreateVolumeModalProps) => {
             >
               {(formik) => (
                 <>
-                  <div className="hidden sm:block">
-                    <div className="border-b border-gray-200 px-8">
-                      <nav className="-mb-px flex space-x-8" aria-label="Tabs">
-                        {tabs.map((tab) => (
-                          <a
-                            key={tab.name}
-                            href={tab.href}
-                            className={classNames(
-                              tab.name === openTab
-                                ? "border-indigo-500 text-indigo-600"
-                                : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
-                              "whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
-                              tab.hidden ? "hidden" : ""
-                            )}
-                            aria-current={tab.current ? "page" : undefined}
-                            onClick={(e) => {
-                              e.preventDefault();
-                              setOpenTab(tab.name);
-                            }}
-                          >
-                            {tab.name}
-                          </a>
-                        ))}
-                      </nav>
-                    </div>
+                  <div className="border-b border-gray-200 px-4 md:px-8">
+                    <nav
+                      className="-mb-px flex space-x-4 md:space-x-8"
+                      aria-label="Tabs"
+                    >
+                      {tabs.map((tab) => (
+                        <a
+                          key={tab.name}
+                          href={tab.href}
+                          className={classNames(
+                            tab.name === openTab
+                              ? "border-indigo-500 text-indigo-600"
+                              : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
+                            "whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
+                            tab.hidden ? "hidden" : ""
+                          )}
+                          aria-current={tab.current ? "page" : undefined}
+                          onClick={(e) => {
+                            e.preventDefault();
+                            setOpenTab(tab.name);
+                          }}
+                        >
+                          {tab.name}
+                        </a>
+                      ))}
+                    </nav>
                   </div>
 
                   <div className="relative px-4 py-3 flex-auto">