diff --git a/frontend/src/components/cards/AvailablePluginCard.jsx b/frontend/src/components/cards/AvailablePluginCard.jsx index 7362c6da..78e81a48 100644 --- a/frontend/src/components/cards/AvailablePluginCard.jsx +++ b/frontend/src/components/cards/AvailablePluginCard.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from 'react'; +import React, { useState } from 'react'; import { ActionIcon, Avatar, @@ -143,19 +143,6 @@ const AvailablePluginCard = ({ plugin, appVersion, multiRepo = false, autoOpenDe plugin.latest_version && plugin.installed_version && compareVersions(plugin.latest_version, plugin.installed_version) < 0; - const descContainerRef = useRef(null); - const [descLines, setDescLines] = useState(3); - useEffect(() => { - const el = descContainerRef.current; - if (!el) return; - const obs = new ResizeObserver(() => { - const lh = parseFloat(getComputedStyle(el).lineHeight) || 22; - setDescLines(Math.max(1, Math.min(3, Math.floor(el.clientHeight / lh)))); - }); - obs.observe(el); - return () => obs.disconnect(); - }, []); - const doInstall = (params) => { if (plugin.deprecated) { setPendingDeprecatedInstall(params); @@ -291,7 +278,7 @@ const AvailablePluginCard = ({ plugin, appVersion, multiRepo = false, autoOpenDe style={{ display: 'flex', flexDirection: 'column', - height: 220, + minHeight: 220, ...(multiRepo && plugin.is_official_repo ? { borderColor: '#0e6459' } : {}), }} > @@ -311,7 +298,9 @@ const AvailablePluginCard = ({ plugin, appVersion, multiRepo = false, autoOpenDe {plugin.author && ( - by {plugin.author} + + {plugin.author} + )} -
- +
+ {plugin.description}
- - + + {plugin.latest_version && ( LATEST diff --git a/frontend/src/components/cards/PluginCard.jsx b/frontend/src/components/cards/PluginCard.jsx index c8e1c1cd..d37ce6d1 100644 --- a/frontend/src/components/cards/PluginCard.jsx +++ b/frontend/src/components/cards/PluginCard.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from 'react'; +import React, { useState } from 'react'; import { showNotification } from '../../utils/notificationUtils.js'; import { Field } from '../Field.jsx'; import { @@ -129,18 +129,6 @@ const PluginCard = ({ const [installing, setInstalling] = useState(false); const [uninstalling] = useState(false); - const descContainerRef = useRef(null); - const [descLines, setDescLines] = useState(3); - useEffect(() => { - const el = descContainerRef.current; - if (!el) return; - const obs = new ResizeObserver(() => { - const lh = parseFloat(getComputedStyle(el).lineHeight) || 22; - setDescLines(Math.max(1, Math.min(3, Math.floor(el.clientHeight / lh)))); - }); - obs.observe(el); - return () => obs.disconnect(); - }, []); const installPlugin = usePluginStore((s) => s.installPlugin); // Keep local enabled state in sync with props @@ -391,10 +379,11 @@ const PluginCard = ({ openModal('details') : undefined} - style={isManaged ? { cursor: 'pointer' } : undefined} + style={{ minWidth: 0, maxWidth: '100%', ...(isManaged ? { cursor: 'pointer' } : {}) }} > - by {plugin.author} + {plugin.author} )} {plugin.help_url && ( @@ -466,9 +455,9 @@ const PluginCard = ({ - {/* Description — flex: 1 pushes bottom content down */} -
- + {/* Description */} +
+ {plugin.description}
@@ -483,7 +472,7 @@ const PluginCard = ({ )} {/* Bottom metadata pills */} - + VERSION diff --git a/frontend/src/pages/PluginBrowse.jsx b/frontend/src/pages/PluginBrowse.jsx index 116c6075..d8853e6a 100644 --- a/frontend/src/pages/PluginBrowse.jsx +++ b/frontend/src/pages/PluginBrowse.jsx @@ -403,7 +403,7 @@ export default function PluginBrowsePage() { {!loading && filteredPlugins.length > 0 && ( <> {paginatedPlugins.map((p) => ( diff --git a/frontend/src/pages/Plugins.jsx b/frontend/src/pages/Plugins.jsx index 10d1afe2..36002776 100644 --- a/frontend/src/pages/Plugins.jsx +++ b/frontend/src/pages/Plugins.jsx @@ -144,7 +144,7 @@ const PluginsList = ({ onRequestDelete, onRequireTrust, onRequestConfirm }) => { {filteredPlugins.length > 0 && (