feat: fix lucide-react renders

feat: fix mobile designs
feat: remove conflicting react-hook-form
feat: change update-account-form path

app/home/(user)/(dashboard)/analysis-results/_components/analysis-level-bar.tsx

@@ -50,7 +50,7 @@ const AnalysisLevelBar = ({
   level: AnalysisResultLevel;
 }) => {
   return (
-    <div className="flex h-3 w-full max-w-[360px] gap-1">
+    <div className="mt-4 flex h-3 w-full max-w-[360px] gap-1 sm:mt-0">
       {normLowerIncluded && (
         <>
           <Level

app/home/(user)/(dashboard)/analysis-results/_components/analysis.tsx

@@ -1,7 +1,11 @@
-import React from 'react';
+'use client';
+
+import React, { useState } from 'react';
 
 import { Info } from 'lucide-react';
 
+import { cn } from '@kit/ui/utils';
+
 import AnalysisLevelBar, { AnalysisResultLevel } from './analysis-level-bar';
 
 export enum AnalysisStatus {
@@ -33,6 +37,7 @@ const Analysis = ({
     normUpper: number;
   };
 }) => {
+  const [showTooltip, setShowTooltip] = useState(false);
   const isUnderNorm = value < normLower;
   const getAnalysisResultLevel = () => {
     if (isUnderNorm) {
@@ -54,12 +59,21 @@ const Analysis = ({
   };
 
   return (
-    <div className="border-border flex items-center justify-between rounded-lg border px-5 py-3">
+    <div className="border-border grid grid-cols-2 items-center justify-between rounded-lg border px-5 py-3 sm:flex">
       <div className="flex items-center gap-2 font-semibold">
         {name}
-        <div className="group/tooltip relative">
+        <div
+          className="group/tooltip relative"
+          onClick={() => setShowTooltip(!showTooltip)}
+          onMouseLeave={() => setShowTooltip(false)}
+        >
           <Info className="hover" />{' '}
-          <div className="absolute bottom-full left-1/2 z-10 mb-2 hidden -translate-x-1/2 rounded bg-gray-800 px-2 py-1 text-sm whitespace-nowrap text-white group-hover/tooltip:block">
+          <div
+            className={cn(
+              'absolute bottom-full left-1/2 z-10 mb-2 hidden -translate-x-1/2 rounded border bg-white p-4 text-sm whitespace-nowrap group-hover/tooltip:block',
+              { block: showTooltip },
+            )}
+          >
             This text changes when you hover the box above.
           </div>
         </div>
@@ -68,7 +82,7 @@ const Analysis = ({
         <div className="font-semibold">{value}</div>
         <div className="text-muted-foreground text-sm">{unit}</div>
       </div>
-      <div className="text-muted-foreground text-center text-sm">
+      <div className="text-muted-foreground mt-4 flex gap-2 text-center text-sm sm:mt-0 sm:block sm:gap-0">
         {normLower} - {normUpper}
         <div>Normaalne vahemik</div>
       </div>

app/home/(user)/_components/dashboard.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import Link from 'next/link';
+
 import { InfoTooltip } from '@/components/ui/info-tooltip';
 import { BlendingModeIcon, RulerHorizontalIcon } from '@radix-ui/react-icons';
 import {
@@ -130,7 +131,7 @@ const dummyRecommendations = [
 export default function Dashboard() {
   return (
     <>
-      <div className="grid auto-rows-fr grid-cols-5 gap-3">
+      <div className="grid auto-rows-fr grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-5">
         {dummyCards.map(
           ({
             title,
@@ -190,7 +191,7 @@ export default function Dashboard() {
             ) => {
               return (
                 <div className="flex justify-between" key={index}>
-                  <div className="flex flex-row items-center gap-4">
+                  <div className="mr-4 flex flex-row items-center gap-4">
                     <div
                       className={cn(
                         'flex size-8 items-center-safe justify-center-safe rounded-full text-white',