Merge pull request 'ui/fieldset: use normal div, due to webkit layout bug for fieldsets' (#5090) from ui/password-input-reveal into main

Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/5090

pkgs/clan-app/ui/src/components/Form/Fieldset.css

@@ -1,4 +1,4 @@
-fieldset {
+.fieldset {
   @apply flex flex-col w-full;
 
   legend {

pkgs/clan-app/ui/src/components/Form/Fieldset.tsx

@@ -35,10 +35,10 @@ export const Fieldset = (props: FieldsetProps) => {
       : props.children;
 
   return (
-    <fieldset
+    <div
       role="group"
-      class={cx({ inverted: props.inverted })}
+      class={cx("fieldset", { inverted: props.inverted })}
-      disabled={props.disabled || false}
+      aria-disabled={props.disabled || undefined}
     >
       {props.legend && (
         <legend>
@@ -69,6 +69,6 @@ export const Fieldset = (props: FieldsetProps) => {
           </Typography>
         </div>
       )}
-    </fieldset>
+    </div>
   );
 };

pkgs/clan-app/ui/src/components/Sidebar/SidebarBody.tsx

@@ -186,7 +186,6 @@ const Services = () => {
         const moduleName = instance.module.name;
 
         const label = moduleName == id ? moduleName : `${moduleName} (${id})`;
-        console.log("Service instance", id, instance, label);
         return {
           id,
           label,

pkgs/clan-app/ui/src/workflows/InstallMachine/steps/installSteps.tsx

@@ -18,7 +18,7 @@ import {
 } from "../InstallMachine";
 import { TextInput } from "@/src/components/Form/TextInput";
 import { Alert, AlertProps } from "@/src/components/Alert/Alert";
-import { createSignal, For, Match, Show, Switch, JSX } from "solid-js";
+import { createSignal, For, Match, Show, Switch } from "solid-js";
 import { Divider } from "@/src/components/Divider/Divider";
 import { Orienter } from "@/src/components/Form/Orienter";
 import { Button } from "@/src/components/Button/Button";
@@ -576,32 +576,6 @@ const PromptsFields = (props: PromptsFieldsProps) => {
                           const [inputType, setInputType] =
                             createSignal(defaultInputType);
 
-                          let endComponent:
-                            | ((props: { inverted?: boolean }) => JSX.Element)
-                            | undefined = undefined;
-
-                          if (defaultInputType === "password") {
-                            endComponent = (props) => (
-                              <KButton
-                                onClick={() => {
-                                  setInputType((type) =>
-                                    type === "password" ? "text" : "password",
-                                  );
-                                }}
-                              >
-                                <Icon
-                                  icon={
-                                    inputType() == "password"
-                                      ? "EyeClose"
-                                      : "EyeOpen"
-                                  }
-                                  color="quaternary"
-                                  inverted={props.inverted}
-                                />
-                              </KButton>
-                            );
-                          }
-
                           return (
                             <TextInput
                               {...f}
@@ -609,7 +583,29 @@ const PromptsFields = (props: PromptsFieldsProps) => {
                                 fieldInfo.prompt.display?.label ||
                                 fieldInfo.prompt.name
                               }
-                              endComponent={endComponent}
+                              endComponent={(local) => (
+                                <Show when={defaultInputType === "password"}>
+                                  <KButton
+                                    onClick={() => {
+                                      setInputType((type) =>
+                                        type === "password"
+                                          ? "text"
+                                          : "password",
+                                      );
+                                    }}
+                                  >
+                                    <Icon
+                                      icon={
+                                        inputType() == "password"
+                                          ? "EyeClose"
+                                          : "EyeOpen"
+                                      }
+                                      color="quaternary"
+                                      inverted={local.inverted}
+                                    />
+                                  </KButton>
+                                </Show>
+                              )}
                               description={fieldInfo.prompt.description}
                               value={f.value || fieldInfo.value || ""}
                               required={fieldInfo.prompt.display?.required}