fix: markup fix for service create modal

services/frontend/src/components/Modal/Service/Create.tsx

@@ -90,31 +90,32 @@ const ModalServiceCreate = (props: IModalServiceProps) => {
             >
               {(formik) => (
                 <>
-                  <div className="hidden sm:block">
+                  <div className="border-b border-gray-200 px-4 md:px-8">
-                    <div className="border-b border-gray-200 px-8">
+                    <nav
-                      <nav className="-mb-px flex space-x-8" aria-label="Tabs">
+                      className="-mb-px flex space-x-4 md:space-x-8"
-                        {tabs.map((tab) => (
+                      aria-label="Tabs"
-                          <a
+                    >
-                            key={tab.name}
+                      {tabs.map((tab) => (
-                            href={tab.href}
+                        <a
-                            className={classNames(
+                          key={tab.name}
-                              tab.name === openTab
+                          href={tab.href}
-                                ? "border-indigo-500 text-indigo-600"
+                          className={classNames(
-                                : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
+                            tab.name === openTab
-                              "whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
+                              ? "border-indigo-500 text-indigo-600"
-                              tab.hidden ? "hidden" : ""
+                              : "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",
-                            aria-current={tab.current ? "page" : undefined}
+                            tab.hidden ? "hidden" : ""
-                            onClick={(e) => {
+                          )}
-                              e.preventDefault();
+                          aria-current={tab.current ? "page" : undefined}
-                              setOpenTab(tab.name);
+                          onClick={(e) => {
-                            }}
+                            e.preventDefault();
-                          >
+                            setOpenTab(tab.name);
-                            {tab.name}
+                          }}
-                          </a>
+                        >
-                        ))}
+                          {tab.name}
-                      </nav>
+                        </a>
-                    </div>
+                      ))}
+                    </nav>
                   </div>
 
                   <div className="relative px-4 py-3 flex-auto">