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,11 +58,12 @@ 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',
         }}
       >
+        <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
           <span
             className="deckyStoreCardTitle"
             style={{
@@ -106,11 +106,12 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
             )}
           </span>
           {root && (
-          <span
+            <div
               className="deckyStoreCardDescription deckyStoreCardDescriptionRoot"
               style={{
                 fontSize: '13px',
                 color: '#fee75c',
+                marginTop: 'auto',
               }}
             >
               <i>{t('PluginCard.plugin_full_access')}</i>{' '}
@@ -125,25 +126,22 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
               >
                 deckbrew.xyz/root
               </a>
-          </span>
+            </div>
           )}
-        <div
-          className="deckyStoreCardButtonRow"
-          style={{
-            marginTop: '1em',
-            width: '100%',
-            overflow: 'hidden',
-          }}
-        >
+        </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',
-                  width: '40%',
-                }}
+                    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
-                className="deckyStoreCardVersionContainer"
-                style={{
-                  marginLeft: '5%',
-                  width: '30%',
-                }}
-              >
+              <div className="deckyStoreCardVersionContainer" style={{ minWidth: '130px' }}>
                 <Dropdown
                   rgOptions={
                     plugin.versions.map((version: StorePluginVersion, index) => ({