Merge pull request #9 from author-more/fix/title-bar-fit

fix: title bar to fit icon set details
author-more · Aug 30, 2024 · 0dbc6e1 · 0dbc6e1
2 parents 06822ef + 0ac9cf6
commit 0dbc6e1
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -144,12 +144,16 @@ function App() {
                   <ChevronRight size={12} />
                 )}
               </IconButton>
-              <h1 className="title-m">{name}</h1>
-              <LinkTag href={website}>Website</LinkTag>
-              <LinkTag href={license.url}>
-                License: {license.name}
-                <sup>*</sup>
-              </LinkTag>
+              <div>
+                <h1 className="title-s">{name}</h1>
+                <ControlsBar>
+                  <LinkTag href={website}>Website</LinkTag>
+                  <LinkTag href={license.url}>
+                    License: {license.name}
+                    <sup>*</sup>
+                  </LinkTag>
+                </ControlsBar>
+              </div>
             </ControlsBar>
             {shouldShowIcons && hasMultipleVariants && (
               <Select

diff --git a/src/LinkTag.css b/src/LinkTag.css
@@ -1,12 +1,19 @@
 .link-tag {
+  display: flex;
+  align-items: center;
+
   border-radius: var(--spacing-4);
 
-  padding: 0.1rem var(--spacing-8);
+  padding: var(--spacing-4);
 
   text-decoration: none;
   cursor: pointer;
 }
 
+.link-tag[class*="body-"] {
+  line-height: 1;
+}
+
 [data-theme="dark"] .link-tag {
   background: var(--db-tertiary);
   color: var(--df-secondary);