fix items

libs/remix-ui/panel/src/lib/plugins/panel-header.tsx

@@ -4,8 +4,8 @@ import { PluginRecord } from '../types'
 import './panel.css'
 
 export interface RemixPanelProps {
-    plugins: Record<string, PluginRecord>;
+  plugins: Record<string, PluginRecord>;
-  }
+}
 const RemixUIPanelHeader = (props: RemixPanelProps) => {
   const [plugin, setPlugin] = useState<PluginRecord>()
   const [toggleExpander, setToggleExpander] = useState<boolean>(false)
@@ -30,7 +30,7 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
         <div className="d-flex flex-row">
           <div className="d-flex flex-row">
             {plugin?.profile?.maintainedBy?.toLowerCase() === "remix" && (<i aria-hidden="true" className="text-success fas fa-check" title="Maintained by Remix"></i>)}
-            {plugin?.profile.documentation && (<a href={plugin.profile.documentation} className="titleInfo mb-2" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>) }
+            {plugin?.profile.documentation && (<a href={plugin.profile.documentation} className="titleInfo mb-2" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>)}
           </div>
           <div className="swapitHeaderInfoSection d-flex justify-content-between" data-id='swapitHeaderInfoSectionId' onClick={toggleClass} title="Plugin info">
             <i className={`px-2 ml-2 mt-1 ${!toggleExpander ? 'fas fa-angle-right' : 'fas fa-angle-down bg-light'}`} aria-hidden="true"></i>
@@ -40,21 +40,25 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
       <div className={`bg-light p-3 pt-1 border-bottom flex-column ${toggleExpander ? "d-flex" : "d-none"}`}>
         {plugin?.profile?.author && <span className="d-flex flex-row align-items-center">
           <label className="mb-0 pr-2">Author:</label>
-          <span> plugin.profile.author </span>
+          <span>{plugin?.profile?.author}</span>
         </span>}
         {plugin?.profile?.maintainedBy && <span className="d-flex flex-row align-items-center">
           <label className="mb-0 pr-2">Maintained by:</label>
-          <span> plugin.profile.maintainedBy</span>
+          <span>{plugin?.profile?.maintainedBy}</span>
         </span>}
         {plugin?.profile?.documentation && <span className="d-flex flex-row align-items-center">
           <label className="mb-0 pr-2">Documentation:</label>
           <span>
-            <a href={plugin.profile?.documentation} className="titleInfo mb-2" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>
+            <a href={plugin?.profile?.documentation} className="titleInfo mb-2" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>
           </span>
         </span>}
-        {plugin?.profile?.description && <span className="d-flex flex-row align-items-center">
+        {plugin?.profile?.description && <span className="d-flex flex-row align-items-baseline">
           <label className="mb-0 pr-2">Description:</label>
-          <span> plugin?.profile.description</span>
+          <div>{plugin?.profile?.description}</div>
+        </span>}
+        {plugin?.profile?.repo && <span className="d-flex flex-row align-items-center">
+          <a href={plugin?.profile?.repo} target="_blank" rel="noreferrer">          
+          Make an issue</a>
         </span>}
       </div>
     </header>)