fix: resolve layout issues

lutralabs · Jun 10, 2024 · d4da999 · d4da999
1 parent 8c07103
commit d4da999
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 8 deletions.
diff --git a/packages/dapp/src/components/EndorseForm/EndorseeCard.tsx b/packages/dapp/src/components/EndorseForm/EndorseeCard.tsx
@@ -65,15 +65,15 @@ export const EndorseeCard = ({ endorsee }: EndorseeCardProps) => {
           </div>
         )}
       </div>
-      <div className="flex max-sm:flex-col max-sm:pt-4 max-sm:gap-y-4 justify-between items-center">
+      <div className="flex max-lg:flex-col max-lg:pt-4 max-lg:gap-y-4 justify-between items-center">
         {endorsee}
 
         <Select
           defaultValue="Based energy 🔵"
           value={endorsementType}
           onValueChange={changeEndorsementType}
         >
-          <SelectTrigger className="w-[180px] max-sm:w-full">
+          <SelectTrigger className="min-w-[160px] w-[160px] max-lg:w-full">
             <SelectValue placeholder="Type of endorsement" />
           </SelectTrigger>
           <SelectContent>

diff --git a/packages/dapp/src/components/Endorsee/EndorseeBadge.tsx b/packages/dapp/src/components/Endorsee/EndorseeBadge.tsx
@@ -44,10 +44,10 @@ export const EndorseeBadge = ({
             </div>
           </div>
           <div className="w-full sm:ml-4">
-            <div className="text-xl sm:text-3xl font-semibold max-sm:text-center">
+            <div className="text-xl sm:text-3xl font-semibold max-lg:text-center">
               {handle}
             </div>
-            <div className="flex items-center text-sm sm:text-md text-gray-600 font-normal max-sm:justify-center gap-x-1">
+            <div className="flex items-center text-sm sm:text-md text-gray-600 font-normal max-lg:justify-center gap-x-1">
               {formatAddress(address)}
               <CopyIcon value={address} />
             </div>

diff --git a/packages/dapp/src/components/Endorsee/EndorseeDialog.tsx b/packages/dapp/src/components/Endorsee/EndorseeDialog.tsx
@@ -56,12 +56,12 @@ export function EndorseeDialog() {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button className="font-semibold text-lg max-sm:w-full" size="lg">
+        <Button className="font-semibold text-lg max-lg:w-full" size="lg">
           Who to endorse?
         </Button>
       </DialogTrigger>
       <DialogContent className="max-w-[525px]">
-        <div className="max-w-[525px] overflow-hidden max-sm:max-w-full">
+        <div className="max-w-[525px] overflow-hidden max-lg:max-w-full">
           <div className="relative flex items-center">
             <MagnifyingGlassIcon className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 transform" />
             <Input

diff --git a/packages/dapp/src/components/Endorsee/index.tsx b/packages/dapp/src/components/Endorsee/index.tsx
@@ -73,7 +73,7 @@ export const EndorseeSkeleton = () => {
       <div className="sm:mt-3">
         <ProfileAvatarSkeleton size="2xl" />
       </div>
-      <div className="flex flex-col w-full sm:ml-4 gap-y-2 max-sm:items-center">
+      <div className="flex flex-col w-full lg:ml-4 gap-y-2 max-lg:items-center">
         <Skeleton className="w-[160px] h-[32px] rounded-full bg-primary-200" />
         <Skeleton className="w-[112px] h-[16px] rounded-full bg-primary-200" />
       </div>

diff --git a/packages/dapp/src/stores/endorsementStore.tsx b/packages/dapp/src/stores/endorsementStore.tsx
@@ -29,7 +29,7 @@ export const endorsementStoreInitialState = {
   address: null,
   platform: null,
   displayValue: null,
-  endorsementType: 'web3',
+  endorsementType: 'Based energy 🔵',
   donationValue: '',
   comment: '',
 };