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 })}
-      disabled={props.disabled || false}
+      class={cx("fieldset", { inverted: props.inverted })}
+      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,16 +576,21 @@ const PromptsFields = (props: PromptsFieldsProps) => {
                           const [inputType, setInputType] =
                             createSignal(defaultInputType);
 
-                          let endComponent:
-                            | ((props: { inverted?: boolean }) => JSX.Element)
-                            | undefined = undefined;
-
-                          if (defaultInputType === "password") {
-                            endComponent = (props) => (
+                          return (
+                            <TextInput
+                              {...f}
+                              label={
+                                fieldInfo.prompt.display?.label ||
+                                fieldInfo.prompt.name
+                              }
+                              endComponent={(local) => (
+                                <Show when={defaultInputType === "password"}>
                                   <KButton
                                     onClick={() => {
                                       setInputType((type) =>
-                                    type === "password" ? "text" : "password",
+                                        type === "password"
+                                          ? "text"
+                                          : "password",
                                       );
                                     }}
                                   >
@@ -596,20 +601,11 @@ const PromptsFields = (props: PromptsFieldsProps) => {
                                           : "EyeOpen"
                                       }
                                       color="quaternary"
-                                  inverted={props.inverted}
+                                      inverted={local.inverted}
                                     />
                                   </KButton>
-                            );
-                          }
-
-                          return (
-                            <TextInput
-                              {...f}
-                              label={
-                                fieldInfo.prompt.display?.label ||
-                                fieldInfo.prompt.name
-                              }
-                              endComponent={endComponent}
+                                </Show>
+                              )}
                               description={fieldInfo.prompt.description}
                               value={f.value || fieldInfo.value || ""}
                               required={fieldInfo.prompt.display?.required}