fix: overflow of descriptions with readmore option

Author: raghavyuva

api/api/versions.json

@@ -3,7 +3,7 @@
     {
       "version": "v1",
       "status": "active",
-      "release_date": "2025-10-15T00:51:50.182090921+05:30",
+      "release_date": "2025-10-15T21:11:09.336673993+05:30",
       "end_of_life": "0001-01-01T00:00:00Z",
       "changes": [
         "Initial API version"

view/app/extensions/components/extension-card.tsx

@@ -12,6 +12,8 @@ import ExtensionForkDialog from './extension-fork-dialog';
 import { useDeleteExtensionMutation } from '@/redux/services/extensions/extensionsApi';
 import { toast } from 'sonner';
 
+const MAX_DESCRIPTION_CHARS = 90;
+
 interface ExtensionCardProps {
   extension: Extension;
   onInstall?: (extension: Extension) => void;
@@ -23,6 +25,7 @@ export function ExtensionCard({ extension, onInstall, onViewDetails }: Extension
   const [forkOpen, setForkOpen] = React.useState(false);
   const [confirmOpen, setConfirmOpen] = React.useState(false);
   const [deleteExtension] = useDeleteExtensionMutation();
+  const [expanded, setExpanded] = React.useState(false);
 
   const onDelete = async () => {
     try {
@@ -80,7 +83,17 @@ export function ExtensionCard({ extension, onInstall, onViewDetails }: Extension
         </div>
 
         <CardDescription className="text-sm leading-relaxed text-muted-foreground">
-          {extension.description}
+          {expanded || extension.description.length <= MAX_DESCRIPTION_CHARS
+            ? extension.description
+            : `${extension.description.slice(0, MAX_DESCRIPTION_CHARS)}…`}
+          {extension.description.length > MAX_DESCRIPTION_CHARS && (
+            <button
+              className="ml-2 text-primary hover:underline text-sm"
+              onClick={() => setExpanded((v) => !v)}
+            >
+              {expanded ? (t('common.readLess') || 'Read less') : (t('common.readMore') || 'Read more')}
+            </button>
+          )}
         </CardDescription>
         <div className="flex gap-2 pt-6 justify-start">
           <Button

view/components/layout/app-sidebar.tsx

@@ -27,6 +27,12 @@ const data = {
       icon: Home,
       resource: 'dashboard'
     },
+    {
+      title: 'navigation.extensions',
+      url: '/extensions',
+      icon: Puzzle,
+      resource: 'extensions'
+    },
     {
       title: 'navigation.selfHost',
       url: '/self-host',
@@ -45,12 +51,6 @@ const data = {
       icon: Folder,
       resource: 'file-manager'
     },
-    {
-      title: 'navigation.extensions',
-      url: '/extensions',
-      icon: Puzzle,
-      resource: 'extensions'
-    },
     {
       title: 'navigation.settings',
       url: '/settings/general',

view/lib/i18n/locales/en.json

@@ -19,7 +19,9 @@
     "edit": "Edit",
     "preview": "Preview",
     "enabled": "Enabled",
-    "disabled": "Disabled"
+    "disabled": "Disabled",
+    "readMore": "Read more",
+    "readLess": "Read less"
   },
   "containers": {
     "title": "Containers",

view/lib/i18n/locales/es.json

@@ -18,7 +18,9 @@
     "edit": "Editar",
     "preview": "Previsualizar",
     "enabled": "Habilitado",
-    "disabled": "Deshabilitado"
+    "disabled": "Deshabilitado",
+    "readMore": "Leer más",
+    "readLess": "Leer menos"
   },
   "containers": {
     "title": "Contenedores",

view/lib/i18n/locales/fr.json

@@ -19,7 +19,9 @@
     "edit": "Modifier",
     "preview": "Aperçu",
     "enabled": "Activé",
-    "disabled": "Désactivé"
+    "disabled": "Désactivé",
+    "readMore": "Lire plus",
+    "readLess": "Lire moins"
   },
   "containers": {
     "title": "Conteneurs",

view/lib/i18n/locales/kn.json

@@ -19,7 +19,9 @@
     "edit": "ಸಂಪಾದಿಸಿ",
     "preview": "ಪೂರ್ವವೀಕ್ಷಣೆ",
     "enabled": "ಸಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ",
-    "disabled": "ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ"
+    "disabled": "ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ",
+    "readMore": "ಇನ್ನಷ್ಟು ಓದಿ",
+    "readLess": "ಕಡಿಮೆ ಓದಿ"
   },
   "containers": {
     "title": "ಕನ್ಟೇನರ್ಗಳು",

view/lib/i18n/locales/ml.json

@@ -14,7 +14,9 @@
     "refreshPage": "പേജ് പുതുക്കുക",
     "loading": "ലോഡുചെയ്യുന്നു...",
     "enabled": "പ്രവർത്തനസജ്ജമാക്കി",
-    "disabled": "പ്രവർത്തനരഹിതമാക്കി"
+    "disabled": "പ്രവർത്തനരഹിതമാക്കി",
+    "readMore": "കൂടുതൽ വായിക്കുക",
+    "readLess": "കുറച്ച് വായിക്കുക"
   },
   "containers": {
     "title": "കണ്ടെയ്‌നറുകൾ",