From 7f691da0c26967853787bfbb15bcbda9085efbf6 Mon Sep 17 00:00:00 2001
From: Idan Levi <29idan29@gmail.com>
Date: Sun, 2 Mar 2025 08:54:59 +0200
Subject: [PATCH 01/11] adjusting the tables for mobile

---
 pages/tools/components/ToolingTable.tsx | 67 +++++++++++++++++++++++--
 1 file changed, 64 insertions(+), 3 deletions(-)

diff --git a/pages/tools/components/ToolingTable.tsx b/pages/tools/components/ToolingTable.tsx
index 01aec8678..883d0f532 100644
--- a/pages/tools/components/ToolingTable.tsx
+++ b/pages/tools/components/ToolingTable.tsx
@@ -101,12 +101,14 @@ const ToolingTable = ({
       {groups.map((group) => (
         <section key={group} className='mb-12 text-left'>
           {group !== 'none' && (
-            <div className='mb-10 px-4 w-full bg-gray-100 dark:bg-slate-900'>
+            <div className='mb-4 px-4 w-full bg-gray-100 dark:bg-slate-900'>
               <Headline2>{toTitleCase(group, '-')}</Headline2>
             </div>
           )}
+          
           <div className='overflow-x-auto'>
-            <table className='min-w-full bg-white dark:bg-slate-800 border border-gray-200'>
+            {/* Desktop Table */}
+            <table className='hidden lg:table min-w-full bg-white dark:bg-slate-800 border border-gray-200'>
               <thead>
                 <tr className='flex w-full min-w-[976px]'>
                   <TableSortableColumnHeader
@@ -258,16 +260,75 @@ const ToolingTable = ({
                 })}
               </tbody>
             </table>
+
+            {/* Mobile Table */}
+            <table className='lg:hidden min-w-full bg-white dark:bg-slate-800 border border-gray-200'>
+              <tbody>
+                {toolsByGroup[group].map((tool: JSONSchemaTool, index) => {
+                  const bowtieData = getBowtieData(tool);
+                  if (bowtieData) {
+                    tool.bowtie = bowtieData;
+                  }
+                  return (
+                    <tr
+                      key={index}
+                      className='border-b border-gray-200 hover:bg-gray-100 dark:hover:bg-slate-700 cursor-pointer'
+                      onClick={() => openModal(tool)}
+                    >
+                      <td className='p-2'>
+                        <div className='flex justify-between items-center'>
+                          <div className='font-medium'>
+                            {tool.name}
+                            {tool.status === 'obsolete' && (
+                              <Tag intent='error' >
+                                {tool.status}
+                              </Tag>
+                            )}
+                          </div>
+                          {bowtieReport && (
+                            <div>
+                              {bowtieData ? (
+                                <a
+                                  href={`https://bowtie.report/#/implementations/${bowtieData.id}`}
+                                  target='blank'
+                                  onClick={(event) => event.stopPropagation()}
+                                  title='See at Bowtie'
+                                >
+                                  <OutLinkIcon className='fill-none stroke-current w-5 h-5 stroke-2' />
+                                </a>
+                              ) : (
+                                <CancelIcon className='fill-current stroke-current w-4 h-4' />
+                              )}
+                            </div>
+                          )}
+                        </div>
+                        <div className='text-sm text-gray-600 dark:text-gray-300 mt-1'>
+                          {tool.toolingTypes?.join(', ')} | {tool.languages?.join(', ')}
+                        </div>
+                        <div className='flex flex-wrap gap-1 mt-1'>
+                          {tool.supportedDialects?.draft?.map((draft) => (
+                            <Badge key={draft}>{draft}</Badge>
+                          ))}
+                        </div>
+                        <div className='text-sm text-gray-600 dark:text-gray-300 mt-1'>
+                          License: {tool.license}
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
           </div>
         </section>
       ))}
+      
       {selectedTool && (
         <ToolingDetailModal tool={selectedTool} onClose={closeModal} />
       )}
     </>
   );
 };
-
 const TableColumnHeader = ({
   children,
   attributes: propAttributes,

From c532c3eb8fe86b593e7276576f5e337ada39ac49 Mon Sep 17 00:00:00 2001
From: Idan Levi <29idan29@gmail.com>
Date: Sun, 2 Mar 2025 09:38:12 +0200
Subject: [PATCH 02/11] small adjusment

---
 pages/tools/components/ToolingTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/tools/components/ToolingTable.tsx b/pages/tools/components/ToolingTable.tsx
index 883d0f532..5be492122 100644
--- a/pages/tools/components/ToolingTable.tsx
+++ b/pages/tools/components/ToolingTable.tsx
@@ -101,7 +101,7 @@ const ToolingTable = ({
       {groups.map((group) => (
         <section key={group} className='mb-12 text-left'>
           {group !== 'none' && (
-            <div className='mb-4 px-4 w-full bg-gray-100 dark:bg-slate-900'>
+            <div className='mb-10 px-4 w-full bg-gray-100 dark:bg-slate-900'>
               <Headline2>{toTitleCase(group, '-')}</Headline2>
             </div>
           )}

From e8a84396d2106bcb3bbda2c41f0a678061427f2e Mon Sep 17 00:00:00 2001
From: Idan Levi <29idan29@gmail.com>
Date: Thu, 6 Mar 2025 16:36:49 +0200
Subject: [PATCH 03/11] Aligning the desktop version

---
 pages/tools/components/ToolingTable.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/tools/components/ToolingTable.tsx b/pages/tools/components/ToolingTable.tsx
index 6c0ae731b..1b70d41c8 100644
--- a/pages/tools/components/ToolingTable.tsx
+++ b/pages/tools/components/ToolingTable.tsx
@@ -117,11 +117,11 @@ const ToolingTable = ({
             </div>
           )}
           
-          <div className='overflow-x-auto'>
+          <div className='overflow-x-hidden'>
             {/* Desktop Table */}
             <table className='hidden lg:table min-w-full bg-white dark:bg-slate-800 border border-gray-200'>
               <thead>
-                <tr className='flex w-full min-w-[976px]'>
+                <tr className='flex w-full min-w-[860px]'>
                   <TableSortableColumnHeader
                     sortBy='name'
                     transform={transform}

From 3122b826083c30f3a88341d11ff5b53888efd82b Mon Sep 17 00:00:00 2001
From: Idan Levi <29idan29@gmail.com>
Date: Thu, 6 Mar 2025 16:47:57 +0200
Subject: [PATCH 04/11] format adjustments

---
 pages/tools/components/ToolingTable.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/pages/tools/components/ToolingTable.tsx b/pages/tools/components/ToolingTable.tsx
index 1b70d41c8..49fd45ca5 100644
--- a/pages/tools/components/ToolingTable.tsx
+++ b/pages/tools/components/ToolingTable.tsx
@@ -116,7 +116,6 @@ const ToolingTable = ({
               <Headline2>{toTitleCase(group, '-')}</Headline2>
             </div>
           )}
-          
           <div className='overflow-x-hidden'>
             {/* Desktop Table */}
             <table className='hidden lg:table min-w-full bg-white dark:bg-slate-800 border border-gray-200'>
@@ -291,8 +290,7 @@ const ToolingTable = ({
                           <div className='font-medium'>
                             {tool.name}
                             {tool.status === 'obsolete' && (
-                              <Tag intent='error' >
-                                {tool.status}
+                              <Tag intent='error' >{tool.status}
                               </Tag>
                             )}
                           </div>
@@ -333,7 +331,6 @@ const ToolingTable = ({
           </div>
         </section>
       ))}
-      
       {selectedTool && (
         <ToolingDetailModal tool={selectedTool} onClose={closeModal} />
       )}

From 0dac678086a5adbf7a3732d660f5309528a28885 Mon Sep 17 00:00:00 2001
From: Idan Levi <29idan29@gmail.com>
Date: Thu, 6 Mar 2025 16:51:42 +0200
Subject: [PATCH 05/11] more adjustments

---
 pages/tools/components/ToolingTable.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/pages/tools/components/ToolingTable.tsx b/pages/tools/components/ToolingTable.tsx
index 49fd45ca5..0977bcbdb 100644
--- a/pages/tools/components/ToolingTable.tsx
+++ b/pages/tools/components/ToolingTable.tsx
@@ -290,8 +290,7 @@ const ToolingTable = ({
                           <div className='font-medium'>
                             {tool.name}
                             {tool.status === 'obsolete' && (
-                              <Tag intent='error' >{tool.status}
-                              </Tag>
+                              <Tag intent='error' >{tool.status}</Tag>
                             )}
                           </div>
                           {bowtieReport && (
@@ -312,7 +311,8 @@ const ToolingTable = ({
                           )}
                         </div>
                         <div className='text-sm text-gray-600 dark:text-gray-300 mt-1'>
-                          {tool.toolingTypes?.join(', ')} | {tool.languages?.join(', ')}
+                          {tool.toolingTypes?.join(', ')} | 
+                          {tool.languages?.join(', ')}
                         </div>
                         <div className='flex flex-wrap gap-1 mt-1'>
                           {tool.supportedDialects?.draft?.map((draft) => (

From 3ae3a18a0be774e89f9db2f84a1951f02574795f Mon Sep 17 00:00:00 2001
From: Idan Levi <29idan29@gmail.com>
Date: Thu, 6 Mar 2025 16:53:43 +0200
Subject: [PATCH 06/11] final format fixing

---
 pages/tools/components/ToolingTable.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/tools/components/ToolingTable.tsx b/pages/tools/components/ToolingTable.tsx
index 0977bcbdb..adcbe4af6 100644
--- a/pages/tools/components/ToolingTable.tsx
+++ b/pages/tools/components/ToolingTable.tsx
@@ -290,7 +290,7 @@ const ToolingTable = ({
                           <div className='font-medium'>
                             {tool.name}
                             {tool.status === 'obsolete' && (
-                              <Tag intent='error' >{tool.status}</Tag>
+                              <Tag intent='error'>{tool.status}</Tag>
                             )}
                           </div>
                           {bowtieReport && (
@@ -311,7 +311,7 @@ const ToolingTable = ({
                           )}
                         </div>
                         <div className='text-sm text-gray-600 dark:text-gray-300 mt-1'>
-                          {tool.toolingTypes?.join(', ')} | 
+                          {tool.toolingTypes?.join(',')} | 
                           {tool.languages?.join(', ')}
                         </div>
                         <div className='flex flex-wrap gap-1 mt-1'>

From af0daeaed8f6552e89731e56d7043b72bde22f6e Mon Sep 17 00:00:00 2001
From: Idan Levi <29idan29@gmail.com>
Date: Thu, 6 Mar 2025 16:56:24 +0200
Subject: [PATCH 07/11] testing format

---
 pages/tools/components/ToolingTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/tools/components/ToolingTable.tsx b/pages/tools/components/ToolingTable.tsx
index adcbe4af6..d485a35ed 100644
--- a/pages/tools/components/ToolingTable.tsx
+++ b/pages/tools/components/ToolingTable.tsx
@@ -311,7 +311,7 @@ const ToolingTable = ({
                           )}
                         </div>
                         <div className='text-sm text-gray-600 dark:text-gray-300 mt-1'>
-                          {tool.toolingTypes?.join(',')} | 
+                          {tool.toolingTypes?.join(',')} 
                           {tool.languages?.join(', ')}
                         </div>
                         <div className='flex flex-wrap gap-1 mt-1'>

From 3faaaebc2c30f091b0733e5c41f089ec45ce29c1 Mon Sep 17 00:00:00 2001
From: Idan Levi <29idan29@gmail.com>
Date: Thu, 6 Mar 2025 16:57:59 +0200
Subject: [PATCH 08/11] fianl format adjustment

---
 pages/tools/components/ToolingTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/tools/components/ToolingTable.tsx b/pages/tools/components/ToolingTable.tsx
index d485a35ed..e19d68706 100644
--- a/pages/tools/components/ToolingTable.tsx
+++ b/pages/tools/components/ToolingTable.tsx
@@ -311,7 +311,7 @@ const ToolingTable = ({
                           )}
                         </div>
                         <div className='text-sm text-gray-600 dark:text-gray-300 mt-1'>
-                          {tool.toolingTypes?.join(',')} 
+                          {tool.toolingTypes?.join(',')}
                           {tool.languages?.join(', ')}
                         </div>
                         <div className='flex flex-wrap gap-1 mt-1'>

From 0ed20150c196fe2d153380e6f89715a243ac396a Mon Sep 17 00:00:00 2001
From: Idan Levi <29idan29@gmail.com>
Date: Mon, 10 Mar 2025 11:31:47 +0200
Subject: [PATCH 09/11] adjusting the languages string

---
 pages/tools/components/ToolingTable.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/pages/tools/components/ToolingTable.tsx b/pages/tools/components/ToolingTable.tsx
index e19d68706..18741239a 100644
--- a/pages/tools/components/ToolingTable.tsx
+++ b/pages/tools/components/ToolingTable.tsx
@@ -311,7 +311,6 @@ const ToolingTable = ({
                           )}
                         </div>
                         <div className='text-sm text-gray-600 dark:text-gray-300 mt-1'>
-                          {tool.toolingTypes?.join(',')}
                           {tool.languages?.join(', ')}
                         </div>
                         <div className='flex flex-wrap gap-1 mt-1'>

From 8ae5c026f2a302a24025f9c7a71a88ad462e5a25 Mon Sep 17 00:00:00 2001
From: Idan Levi <29idan29@gmail.com>
Date: Tue, 11 Mar 2025 14:57:06 +0200
Subject: [PATCH 10/11] adding the field name before each field value

---
 pages/tools/components/ToolingTable.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/pages/tools/components/ToolingTable.tsx b/pages/tools/components/ToolingTable.tsx
index 18741239a..edc5da9c1 100644
--- a/pages/tools/components/ToolingTable.tsx
+++ b/pages/tools/components/ToolingTable.tsx
@@ -293,25 +293,35 @@ const ToolingTable = ({
                               <Tag intent='error'>{tool.status}</Tag>
                             )}
                           </div>
+                        </div>
+                        <div className='text-sm text-gray-600 dark:text-gray-300 mt-1'>
+                          Languages: {tool.languages?.join(', ')}
+                        </div>
+                        <div className='text-sm text-gray-600 dark:text-gray-300 mt-1 flex items-center'>
+                          <span>Bowtie:</span>
                           {bowtieReport && (
-                            <div>
+                            <>
                               {bowtieData ? (
                                 <a
                                   href={`https://bowtie.report/#/implementations/${bowtieData.id}`}
                                   target='blank'
                                   onClick={(event) => event.stopPropagation()}
                                   title='See at Bowtie'
+                                  className='ml-1'
                                 >
                                   <OutLinkIcon className='fill-none stroke-current w-5 h-5 stroke-2' />
                                 </a>
                               ) : (
-                                <CancelIcon className='fill-current stroke-current w-4 h-4' />
+                                <CancelIcon className='fill-current stroke-current w-4 h-4 ml-1' />
                               )}
-                            </div>
+                            </>
+                          )}
+                          {!bowtieReport && (
+                            <span className='ml-1'>Not available</span>
                           )}
                         </div>
                         <div className='text-sm text-gray-600 dark:text-gray-300 mt-1'>
-                          {tool.languages?.join(', ')}
+                          Supported Dialects:
                         </div>
                         <div className='flex flex-wrap gap-1 mt-1'>
                           {tool.supportedDialects?.draft?.map((draft) => (

From 892acc6a7495817195cbc12de769d376058cb506 Mon Sep 17 00:00:00 2001
From: Idan Levi <29idan29@gmail.com>
Date: Tue, 18 Mar 2025 17:29:31 +0200
Subject: [PATCH 11/11] adjusting the bowtie field

---
 pages/tools/components/ToolingTable.tsx | 40 ++++++++++---------------
 1 file changed, 16 insertions(+), 24 deletions(-)

diff --git a/pages/tools/components/ToolingTable.tsx b/pages/tools/components/ToolingTable.tsx
index edc5da9c1..ead2d7153 100644
--- a/pages/tools/components/ToolingTable.tsx
+++ b/pages/tools/components/ToolingTable.tsx
@@ -285,7 +285,22 @@ const ToolingTable = ({
                       className='border-b border-gray-200 hover:bg-gray-100 dark:hover:bg-slate-700 cursor-pointer'
                       onClick={() => openModal(tool)}
                     >
-                      <td className='p-2'>
+                      <td className='p-2 relative'>
+                        {bowtieData && (
+                          <div className='absolute top-0 right-0 m-2 text-sm text-gray-600 dark:text-gray-300 flex items-center'>
+                            <span>Bowtie:</span>
+                            <a
+                              href={`https://bowtie.report/#/implementations/${bowtieData.id}`}
+                              target='blank'
+                              onClick={(event) => event.stopPropagation()}
+                              title='See at Bowtie'
+                              className='ml-1'
+                            >
+                              <OutLinkIcon className='fill-none stroke-current w-5 h-5 stroke-2' />
+                            </a>
+                          </div>
+                        )}
+
                         <div className='flex justify-between items-center'>
                           <div className='font-medium'>
                             {tool.name}
@@ -297,29 +312,6 @@ const ToolingTable = ({
                         <div className='text-sm text-gray-600 dark:text-gray-300 mt-1'>
                           Languages: {tool.languages?.join(', ')}
                         </div>
-                        <div className='text-sm text-gray-600 dark:text-gray-300 mt-1 flex items-center'>
-                          <span>Bowtie:</span>
-                          {bowtieReport && (
-                            <>
-                              {bowtieData ? (
-                                <a
-                                  href={`https://bowtie.report/#/implementations/${bowtieData.id}`}
-                                  target='blank'
-                                  onClick={(event) => event.stopPropagation()}
-                                  title='See at Bowtie'
-                                  className='ml-1'
-                                >
-                                  <OutLinkIcon className='fill-none stroke-current w-5 h-5 stroke-2' />
-                                </a>
-                              ) : (
-                                <CancelIcon className='fill-current stroke-current w-4 h-4 ml-1' />
-                              )}
-                            </>
-                          )}
-                          {!bowtieReport && (
-                            <span className='ml-1'>Not available</span>
-                          )}
-                        </div>
                         <div className='text-sm text-gray-600 dark:text-gray-300 mt-1'>
                           Supported Dialects:
                         </div>