From e10ee11f0ed8d24edf6863b730bf3832332445e9 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Sun, 24 Nov 2024 18:03:39 +0100
Subject: [PATCH] Fix title field on keywords section #705

---
 src/panelWebView/components/Fields/FieldTitle.tsx | 2 +-
 src/panelWebView/components/SeoKeywords.tsx       | 2 --
 src/panelWebView/components/SeoStatus.tsx         | 2 ++
 src/panelWebView/styles.css                       | 3 ++-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/panelWebView/components/Fields/FieldTitle.tsx b/src/panelWebView/components/Fields/FieldTitle.tsx
index 80999e50..92c650c5 100644
--- a/src/panelWebView/components/Fields/FieldTitle.tsx
+++ b/src/panelWebView/components/Fields/FieldTitle.tsx
@@ -32,7 +32,7 @@ export const FieldTitle: React.FunctionComponent<IFieldTitleProps> = ({
   }, [icon]);
 
   return (
-    <div className='flex items-center justify-between w-full mb-2'>
+    <div className='field__title flex items-center justify-between w-full mb-2'>
       <label className={`metadata_field__label text-base text-[var(--vscode-foreground)] ${className || ''}`}>
         {Icon}
         <span style={{ lineHeight: '16px' }}>{label}</span>
diff --git a/src/panelWebView/components/SeoKeywords.tsx b/src/panelWebView/components/SeoKeywords.tsx
index 86ac6440..16ad8945 100644
--- a/src/panelWebView/components/SeoKeywords.tsx
+++ b/src/panelWebView/components/SeoKeywords.tsx
@@ -59,8 +59,6 @@ const SeoKeywords: React.FunctionComponent<ISeoKeywordsProps> = ({
 
   return (
     <section className={`seo__keywords__table`}>
-      <h4 className='!text-left'>{localize(LocalizationKey.panelSeoKeywordsTitle)}</h4>
-
       <VSCodeTable>
         <VSCodeTableHeader>
           <VSCodeTableRow className={`border-t border-t-[var(--vscode-editorGroup-border)]`}>
diff --git a/src/panelWebView/components/SeoStatus.tsx b/src/panelWebView/components/SeoStatus.tsx
index 98322c5d..af28b788 100644
--- a/src/panelWebView/components/SeoStatus.tsx
+++ b/src/panelWebView/components/SeoStatus.tsx
@@ -86,6 +86,8 @@ const SeoStatus: React.FunctionComponent<ISeoStatusProps> = ({
         </section>
 
         <section className={`seo__keywords`}>
+          <h4 className='!text-left'>{localize(LocalizationKey.panelSeoKeywordsTitle)}</h4>
+
           <SeoKeywords
             keywords={metadata?.keywords}
             title={metadata[titleField]}
diff --git a/src/panelWebView/styles.css b/src/panelWebView/styles.css
index 2c43533a..c459fb2b 100644
--- a/src/panelWebView/styles.css
+++ b/src/panelWebView/styles.css
@@ -1184,7 +1184,8 @@ vscode-divider {
 /* SEO */
 .seo {
   .article__tags label,
-  .article__tags__items {
+  .article__tags__items,
+  .article__tags .field__title {
     display: none;
   }