Merge pull request #7 from salimcansatici/main

Fixed Break Words

Author: LibreBlocksDev

src/views/block/message-card.tsx

@@ -14,7 +14,7 @@ const MessageRow = ({ property, value }: { property: number | string; value: num
           {value}
         </Link>
       ) : (
-        <div className='text-primary'>{value}</div>
+        <div className='flex-col justify-between break-words  text-primary'>{value}</div>
       )}
     </div>
   );
@@ -23,13 +23,13 @@ const MessageRow = ({ property, value }: { property: number | string; value: num
 export default function BlockMessageCard({ name, data }: MessageCardProps) {
   return (
     <div className='rounded-md border border-shade-800 bg-shade-900'>
-      <div className='border-b border-shade-800 py-2.5 px-5'>
+      <div className='border-b border-shade-800 px-5 py-2.5'>
         <p className='font-semibold uppercase'>{name}</p>
       </div>
       <div className='space-y-3 p-5'>
         {/* 
-        - tx bizim data içinden gelmediği için bu tooltipli versiyon kullanılmadı
-        
+        - TX bizim data içinden gelmediği için bu tooltipli versiyon kullanılmadı 
+        - The version with this tooltip was not used because the TX did not come from our data.
 
         <div>
           <p className='font-semibold'>Delegator Address</p>

src/views/block/overview.tsx

@@ -34,7 +34,7 @@ export default function TxOverview({ data }: OverviewProps) {
   return (
     <div className='divide-y divide-shade-800 rounded-xl border border-shade-800 bg-black pb-5 text-white'>
       <div className='p-5'>
-        <div className='align-center inline-block rounded-full bg-primary py-1.5 px-3 text-xs font-medium capitalize'>
+        <div className='align-center inline-block rounded-full bg-primary px-3 py-1.5 text-xs font-medium capitalize'>
           {actionState}
         </div>
         <p className='mt-5 text-sm'>
@@ -43,19 +43,19 @@ export default function TxOverview({ data }: OverviewProps) {
           {dayjs(timestamp).utc(true).format('MMM DD, YYYY h:mm A')} UTC
         </p>
       </div>
-      <div className='flex items-center justify-between py-3 px-5'>
+      <div className='flex items-center justify-between px-5 py-3'>
         <p>Block</p>
         <p className='font-semibold'>
           <Link href={`/block/${data.block_num}`} className='text-primary hover:underline'>
             {data.block_num}
           </Link>
         </p>
       </div>
-      <div className='flex items-center justify-between space-x-2 py-3 px-5'>
+      <div className='flex items-center justify-between space-x-2 px-5 py-3'>
         <p>Total Actions</p>
         <p className='text-right font-semibold'>{totalActionsLength}</p>
       </div>
-      <div className='flex items-center justify-between space-x-2 py-3 px-5'>
+      <div className='flex items-center justify-between space-x-2 px-5 py-3'>
         <p>Producer</p>
         <Link
           href={`/address/${data.producer}`}
@@ -65,19 +65,19 @@ export default function TxOverview({ data }: OverviewProps) {
         </Link>
       </div>
 
-      <div className='flex items-center justify-between space-x-2 py-3 px-5'>
+      <div className='flex items-center justify-between space-x-2 px-5 py-3'>
         <p>CPU Usage</p>
         <p className='text-right font-semibold'>{data.transactions[0].cpu_usage_us} µs</p>
       </div>
 
-      <div className='flex items-center justify-between space-x-2 py-3 px-5'>
+      <div className='flex items-center justify-between space-x-2 px-5 py-3'>
         <p>NET Usage</p>
         <p className='text-right font-semibold'>{data.transactions[0].net_usage_words}</p>
       </div>
 
-      <div className='flex items-center justify-between space-x-2 py-3 px-5'>
+      <div className=' flex-col items-start justify-between break-words px-5 py-3'>
         <p>Memo</p>
-        <p className='text-right font-semibold'>
+        <p className='text-left font-semibold '>
           {data.transactions[0].trx.transaction.actions[0].data.memo || '-'}
         </p>
       </div>

src/views/tx/message-card.tsx

@@ -14,7 +14,7 @@ const MessageRow = ({ property, value }: { property: number | string; value: num
           {value}
         </Link>
       ) : (
-        <div className='text-primary'>{value}</div>
+        <div className='flex-col justify-between break-words  text-primary'>{value}</div>
       )}
     </div>
   );
@@ -23,7 +23,7 @@ const MessageRow = ({ property, value }: { property: number | string; value: num
 export default function TxMessageCard({ name, message }: MessageCardProps) {
   return (
     <div className='rounded-md border border-shade-800 bg-shade-900'>
-      <div className='border-b border-shade-800 py-2.5 px-5'>
+      <div className='border-b border-shade-800 px-5 py-2.5'>
         <p className='font-semibold uppercase'>{name}</p>
       </div>
       <div className='space-y-3 p-5'>

src/views/tx/overview.tsx

@@ -32,7 +32,7 @@ export default function TxOverview({ data }: OverviewProps) {
   return (
     <div className='divide-y divide-shade-800 rounded-xl border border-shade-800 bg-black pb-5 text-white'>
       <div className='p-5'>
-        <div className='align-center inline-block rounded-full bg-primary py-1.5 px-3 text-xs font-medium capitalize'>
+        <div className='align-center inline-block rounded-full bg-primary px-3 py-1.5 text-xs font-medium capitalize'>
           {actionState}
         </div>
         <p className='mt-5 text-sm'>
@@ -41,19 +41,19 @@ export default function TxOverview({ data }: OverviewProps) {
           {dayjs(timestamp).utc(true).format('MMM DD, YYYY h:mm A')} UTC
         </p>
       </div>
-      <div className='flex items-center justify-between py-3 px-5'>
+      <div className='flex items-center justify-between px-5 py-3'>
         <p>Block</p>
         <p className='font-semibold'>
           <Link href={`/block/${firstAction.block_num}`} className='text-primary hover:underline'>
             {firstAction.block_num}
           </Link>
         </p>
       </div>
-      <div className='flex items-center justify-between space-x-2 py-3 px-5'>
+      <div className='flex items-center justify-between space-x-2 px-5 py-3'>
         <p>Total Actions</p>
         <p className='text-right font-semibold'>{data.actions.length}</p>
       </div>
-      <div className='flex items-center justify-between space-x-2 py-3 px-5'>
+      <div className='flex items-center justify-between space-x-2 px-5 py-3'>
         <p>Producer</p>
         <Link
           href={`/address/${firstAction.producer}`}
@@ -63,19 +63,19 @@ export default function TxOverview({ data }: OverviewProps) {
         </Link>
       </div>
 
-      <div className='flex items-center justify-between space-x-2 py-3 px-5'>
+      <div className='flex items-center justify-between space-x-2 px-5 py-3'>
         <p>CPU Usage</p>
         <p className='text-right font-semibold'>{firstAction.cpu_usage_us} µs</p>
       </div>
 
-      <div className='flex items-center justify-between space-x-2 py-3 px-5'>
+      <div className='flex items-center justify-between space-x-2 px-5 py-3'>
         <p>NET Usage</p>
         <p className='text-right font-semibold'>{firstAction.net_usage_words}</p>
       </div>
 
-      <div className='flex items-center justify-between space-x-2 py-3 px-5'>
+      <div className=' flex-col items-start justify-between break-words px-5 py-3'>
         <p>Memo</p>
-        <p className='text-right font-semibold'>{firstAction.act.data.memo || '-'}</p>
+        <p className='text-left font-semibold '>{firstAction.act.data.memo || '-'}</p>
       </div>
     </div>
   );