adjust some small store stylings (#471)

frontend/src/components/store/PluginCard.tsx

@@ -6,7 +6,7 @@ import {
   SingleDropdownOption,
   SuspensefulImage,
 } from 'decky-frontend-lib';
-import { FC, useState } from 'react';
+import { CSSProperties, FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { InstallType } from '../../plugin';
@@ -18,7 +18,7 @@ interface PluginCardProps {
 
 const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
   const [selectedOption, setSelectedOption] = useState<number>(0);
-  const root: boolean = plugin.tags.some((tag) => tag === 'root');
+  const root = plugin.tags.some((tag) => tag === 'root');
 
   const { t } = useTranslation();
 
@@ -30,7 +30,6 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
         marginRight: '20px',
         marginBottom: '20px',
         display: 'flex',
-        alignItems: 'center',
       }}
     >
       <div
@@ -59,91 +58,90 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
           width: 'calc(100% - 320px)', // The calc is here so that the info section doesn't expand into the image
           display: 'flex',
           flexDirection: 'column',
-          height: '100%',
+          justifyContent: 'space-between',
           marginLeft: '1em',
-          justifyContent: 'center',
+          gap: '10px',
         }}
       >
-        <span
+        <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-          className="deckyStoreCardTitle"
-          style={{
-            fontSize: '1.25em',
-            fontWeight: 'bold',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            width: '90%',
-          }}
-        >
-          {plugin.name}
-        </span>
-        <span
-          className="deckyStoreCardAuthor"
-          style={{
-            marginRight: 'auto',
-            fontSize: '1em',
-          }}
-        >
-          {plugin.author}
-        </span>
-        <span
-          className="deckyStoreCardDescription"
-          style={{
-            fontSize: '13px',
-            color: '#969696',
-            WebkitLineClamp: root ? '2' : '3',
-            WebkitBoxOrient: 'vertical',
-            overflow: 'hidden',
-            display: '-webkit-box',
-          }}
-        >
-          {plugin.description ? (
-            plugin.description
-          ) : (
-            <span>
-              <i style={{ color: '#666' }}>{t('PluginCard.plugin_no_desc')}</i>
-            </span>
-          )}
-        </span>
-        {root && (
           <span
-            className="deckyStoreCardDescription deckyStoreCardDescriptionRoot"
+            className="deckyStoreCardTitle"
             style={{
-              fontSize: '13px',
+              fontSize: '1.25em',
-              color: '#fee75c',
+              fontWeight: 'bold',
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              width: '90%',
             }}
           >
-            <i>{t('PluginCard.plugin_full_access')}</i>{' '}
+            {plugin.name}
-            <a
+          </span>
-              className="deckyStoreCardDescriptionRootLink"
+          <span
-              href="https://deckbrew.xyz/root"
+            className="deckyStoreCardAuthor"
-              target="_blank"
+            style={{
+              marginRight: 'auto',
+              fontSize: '1em',
+            }}
+          >
+            {plugin.author}
+          </span>
+          <span
+            className="deckyStoreCardDescription"
+            style={{
+              fontSize: '13px',
+              color: '#969696',
+              WebkitLineClamp: root ? '2' : '3',
+              WebkitBoxOrient: 'vertical',
+              overflow: 'hidden',
+              display: '-webkit-box',
+            }}
+          >
+            {plugin.description ? (
+              plugin.description
+            ) : (
+              <span>
+                <i style={{ color: '#666' }}>{t('PluginCard.plugin_no_desc')}</i>
+              </span>
+            )}
+          </span>
+          {root && (
+            <div
+              className="deckyStoreCardDescription deckyStoreCardDescriptionRoot"
               style={{
+                fontSize: '13px',
                 color: '#fee75c',
-                textDecoration: 'none',
+                marginTop: 'auto',
               }}
             >
-              deckbrew.xyz/root
+              <i>{t('PluginCard.plugin_full_access')}</i>{' '}
-            </a>
+              <a
-          </span>
+                className="deckyStoreCardDescriptionRootLink"
-        )}
+                href="https://deckbrew.xyz/root"
-        <div
+                target="_blank"
-          className="deckyStoreCardButtonRow"
+                style={{
-          style={{
+                  color: '#fee75c',
-            marginTop: '1em',
+                  textDecoration: 'none',
-            width: '100%',
+                }}
-            overflow: 'hidden',
+              >
-          }}
+                deckbrew.xyz/root
-        >
+              </a>
+            </div>
+          )}
+        </div>
+        <div className="deckyStoreCardButtonRow">
           <PanelSectionRow>
-            <Focusable style={{ display: 'flex', maxWidth: '100%' }}>
+            <Focusable style={{ display: 'flex', gap: '5px', padding: 0 }}>
               <div
                 className="deckyStoreCardInstallContainer"
-                style={{
+                style={
-                  paddingTop: '0px',
+                  {
-                  paddingBottom: '0px',
+                    paddingTop: '0px',
-                  width: '40%',
+                    paddingBottom: '0px',
-                }}
+                    flexGrow: 1,
+                    '--field-negative-horizontal-margin': 0,
+                  } as CSSProperties
+                }
               >
                 <ButtonItem
                   bottomSeparator="none"
@@ -155,13 +153,7 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
                   <span className="deckyStoreCardInstallText">{t('PluginCard.plugin_install')}</span>
                 </ButtonItem>
               </div>
-              <div
+              <div className="deckyStoreCardVersionContainer" style={{ minWidth: '130px' }}>
-                className="deckyStoreCardVersionContainer"
-                style={{
-                  marginLeft: '5%',
-                  width: '30%',
-                }}
-              >
                 <Dropdown
                   rgOptions={
                     plugin.versions.map((version: StorePluginVersion, index) => ({