Merge branch 'layout-fixes' of github.com:ordinalspractice/bip322 into layout-fixes

Author: raphjaph

www/src/App.tsx

@@ -38,8 +38,8 @@ function App() {
 
       <main className="w-full">
         <div className="w-[95%] md:w-[65vw] mx-auto">
-          <div className="flex flex-col lg:flex-row gap-[calc(var(--size)*0.1)] min-h-[50vh] items-center">
-            <div className="flex-1 w-full flex justify-center items-center">
+          <div className="flex flex-col lg:flex-row gap-[calc(var(--size)*0.2)] lg:gap-[calc(var(--size)*0.1)] min-h-[50vh] items-center">
+            <div className="flex-1 w-full flex justify-center items-end lg:items-center">
               <SignMessageForm
                 message={signState.message}
                 signedData={signState.signedData}
@@ -54,7 +54,7 @@ function App() {
               />
             </div>
 
-            <div className="flex-1 w-full flex justify-center items-center">
+            <div className="flex-1 w-full flex justify-center items-start lg:items-center">
               <VerifyForm
                 formData={verifyState}
                 verificationResult={verifyState.verificationResult}

www/src/bip322_bg.wasm

@@ -72,14 +72,17 @@ const SignMessageForm = ({
                 disabled
                 tooltipLabel="address"
               />
+
               <BaseTextarea
                 placeholder="message"
                 value={signedData ? signedData.message : message}
                 onChange={(e) => !signedData && onMessageChange(e.target.value)}
                 required
                 disabled={signedData !== null}
                 tooltipLabel="message"
+                variant="three-lines"
               />
+
               {signedData ? (
                 <BaseInput
                   type="text"

www/src/components/SignMessage.tsx

@@ -56,32 +56,28 @@ export const TooltipWrapper = ({
   return (
     <TooltipProvider>
       <Tooltip open={isTooltipOpen} onOpenChange={setIsTooltipOpen}>
-        <div className="relative w-full">
-          <TooltipTrigger
-            className="w-full"
-            onClick={(e) => {
-              e.preventDefault();
-              if (clickToCopy) handleCopy();
-            }}
+        <TooltipTrigger
+          asChild
+          onClick={(e) => {
+            e.preventDefault();
+            if (clickToCopy) handleCopy();
+          }}
+        >
+          <div
+            className={`tooltip-wrapper ${clickToCopy ? "cursor-pointer" : ""}`}
           >
             <div
-              className={`tooltip-wrapper ${
-                clickToCopy ? "cursor-pointer" : ""
+              className={`tooltip-wrapper-inner ${
+                clickToCopy ? "copy-enabled" : ""
               }`}
             >
-              <div
-                className={`tooltip-wrapper-inner ${
-                  clickToCopy ? "copy-enabled" : ""
-                }`}
-              >
-                {children}
-              </div>
+              {children}
             </div>
-          </TooltipTrigger>
-          <TooltipContent sideOffset={5}>
-            <p className="tooltip-text">{getTooltipText()}</p>
-          </TooltipContent>
-        </div>
+          </div>
+        </TooltipTrigger>
+        <TooltipContent sideOffset={5}>
+          <p className="text-xs">{getTooltipText()}</p>
+        </TooltipContent>
       </Tooltip>
     </TooltipProvider>
   );

www/src/components/TooltipWrapper.tsx

@@ -3,12 +3,15 @@ import FormWrapper from "@/components/FormWrapper";
 import { BaseInput } from "@/components/ui/base-input";
 import { BaseButton } from "@/components/ui/base-button";
 import type { VerifyFormState } from "@/hooks/useVerifyMessage";
+import { BaseTextarea } from "./ui/base-textarea";
 
 interface VerifyFormProps {
   formData: VerifyFormState;
   verificationResult: string | null;
   onSubmit: (e: React.FormEvent) => void;
-  onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onInputChange: (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => void;
   onReset: () => void;
 }
 
@@ -53,8 +56,7 @@ const VerifyForm = ({
               tooltipLabel="address"
             />
 
-            <BaseInput
-              type="text"
+            <BaseTextarea
               id="message"
               placeholder="message"
               value={formData.message}
@@ -63,6 +65,7 @@ const VerifyForm = ({
               required
               disabled={verificationResult !== null}
               tooltipLabel="message"
+              variant="two-lines"
             />
 
             <BaseInput

www/src/components/VerifyForm.tsx

@@ -3,13 +3,19 @@ import { cn } from "@/lib/utils";
 import { Textarea } from "@/components/ui/textarea";
 import { TooltipWrapper } from "@/components/TooltipWrapper";
 
+type TextareaVariant = "default" | "two-lines" | "three-lines";
+
 interface BaseTextareaProps
   extends React.ComponentPropsWithoutRef<typeof Textarea> {
+  variant?: TextareaVariant;
   tooltipLabel?: string;
 }
 
 const BaseTextarea = React.forwardRef<HTMLTextAreaElement, BaseTextareaProps>(
-  ({ className, tooltipLabel, disabled, ...props }, ref) => {
+  (
+    { className, variant = "default", tooltipLabel, disabled, ...props },
+    ref
+  ) => {
     return (
       <TooltipWrapper
         value={props.value}
@@ -21,6 +27,8 @@ const BaseTextarea = React.forwardRef<HTMLTextAreaElement, BaseTextareaProps>(
           className={cn(
             "common-component",
             "common-textarea",
+            variant === "two-lines" && "two-lines",
+            variant === "three-lines" && "three-lines",
             disabled && "pointer-events-none cursor-pointer",
             className
           )}
@@ -36,4 +44,4 @@ const BaseTextarea = React.forwardRef<HTMLTextAreaElement, BaseTextareaProps>(
 BaseTextarea.displayName = "BaseTextarea";
 
 export { BaseTextarea };
-export type { BaseTextareaProps };
+export type { BaseTextareaProps, TextareaVariant };

www/src/components/ui/base-textarea.tsx

@@ -9,7 +9,7 @@ export interface VerifyFormState {
 }
 
 interface VerifyMessageActions {
-  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
   handleVerify: (e: React.FormEvent) => void;
   reset: () => void;
 }
@@ -22,7 +22,7 @@ export const useVerifyMessage = (): [VerifyFormState, VerifyMessageActions] => {
     verificationResult: null,
   });
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     setState(prev => ({
       ...prev,
       [e.target.id]: e.target.value,

www/src/hooks/useVerifyMessage.ts

@@ -183,7 +183,7 @@ body {
 .button-icon {
   background-color: transparent;
   aspect-ratio: 1;
-  padding: calc(var(--font-sm) * 1.2);
+  padding: calc(var(--font-sm) * 1.8) calc(var(--font-sm) * 1.2);
   transition: all 0.3s ease;
   background-color: hsl(var(--primary) / 0.05) !important;
 }
@@ -194,8 +194,8 @@ body {
 }
 
 .button-icon svg {
-  width: calc(var(--font-md) * 1.1) !important;
-  height: calc(var(--font-md) * 1.1) !important;
+  width: calc(var(--font-md) * 1.4) !important;
+  height: calc(var(--font-md) * 1.4) !important;
 }
 
 
@@ -233,12 +233,21 @@ body {
 .common-textarea {
   resize: none;
   font-size: var(--font-xs) !important;
-  height: calc(var(--font-sm) * 6);
   padding: calc(var(--font-sm) * 0.8) calc(var(--font-sm) * 0.6);
   color: hsl(var(--primary) / 0.8);
   text-shadow: var(--glow-sm);
 }  
 
+.common-textarea.two-lines {
+  height: calc(var(--font-sm) * 6);
+  min-height: calc(var(--font-sm) * 6);
+}
+
+.common-textarea.three-lines {
+  height: calc(var(--font-sm) * 9.2);
+  min-height: calc(var(--font-sm) * 9.2);
+}
+
 .verification-input {
   text-align: center;
   cursor: default;