Fix/prompt card styling

src/components/ExportModal.tsx

@@ -0,0 +1,76 @@
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { FileText, FileJson, X } from 'lucide-react';
+import type { Prompt } from '../types';
+
+interface ExportModalProps {
+  prompt: Prompt;
+  onClose: () => void;
+  onExportMD: (p: Prompt) => void;
+  onExportJSON: (p: Prompt) => void;
+}
+
+export function ExportModal({
+  prompt,
+  onClose,
+  onExportMD,
+  onExportJSON,
+}: ExportModalProps) {
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [onClose]);
+
+  const handleExportMD = () => {
+    onExportMD(prompt);
+    onClose();
+  };
+
+  const handleExportJSON = () => {
+    onExportJSON(prompt);
+    onClose();
+  };
+
+  if (typeof document === 'undefined') return null;
+
+  return createPortal(
+    <div className="modal-overlay" onClick={onClose}>
+      <div
+        className="modal-content export-modal"
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="export-modal-title"
+      >
+        <div className="modal-header">
+          <h3 id="export-modal-title">Export "{prompt.title}"</h3>
+          <button className="btn-icon" onClick={onClose} title="Close">
+            <X size={18} />
+          </button>
+        </div>
+        <div className="modal-actions">
+          <button
+            type="button"
+            className="btn-primary"
+            onClick={handleExportMD}
+            style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem' }}
+          >
+            <FileText size={16} /> Download as Markdown (.md)
+          </button>
+          <button
+            type="button"
+            className="btn-secondary"
+            onClick={handleExportJSON}
+            style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem' }}
+          >
+            <FileJson size={16} /> Download as JSON (.json)
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}

src/components/PromptList.tsx

@@ -15,6 +15,7 @@ import {
 } from 'lucide-react';
 import { VariableInjector } from './VariableInjector';
 import { VersionHistory } from './VersionHistory';
+import { ExportModal } from './ExportModal';
 
 interface ListChildData<T = unknown> {
   index: number;
@@ -54,8 +55,7 @@ interface PromptCardActionsProps {
   prompt: Prompt;
   onEdit: (p: Prompt) => void;
   onCopy: (body: string) => void;
-  onExportMD: (p: Prompt) => void;
-  onExportJSON: (p: Prompt) => void;
+  onExport: (p: Prompt) => void;
   onViewHistory: (id: string) => void;
   onDelete: (id: string) => void;
 }
@@ -64,8 +64,7 @@ function PromptCardActions({
   prompt,
   onEdit,
   onCopy,
-  onExportMD,
-  onExportJSON,
+  onExport,
   onViewHistory,
   onDelete,
 }: PromptCardActionsProps) {
@@ -82,19 +81,12 @@ function PromptCardActions({
         <Copy size={16} />
       </button>
       <button
-        onClick={() => onExportMD(prompt)}
+        onClick={() => onExport(prompt)}
         className="btn-icon"
-        title="Export as Markdown"
+        title="Export"
       >
         <Download size={16} />
       </button>
-      <button
-        onClick={() => onExportJSON(prompt)}
-        className="btn-icon"
-        title="Export as JSON"
-      >
-        <Download size={16} style={{ color: 'var(--primary-color)' }} />
-      </button>
       <button
         onClick={() => onViewHistory(prompt.id)}
         className="btn-icon"
@@ -204,6 +196,7 @@ export function PromptList({
 }: PromptListProps) {
   const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
   const [historyPromptId, setHistoryPromptId] = useState<string | null>(null);
+  const [exportPrompt, setExportPrompt] = useState<Prompt | null>(null);
 
   // O(1) workspace lookup optimization using Object.fromEntries
   const workspaceMap = useMemo(
@@ -316,8 +309,7 @@ export function PromptList({
               prompt={prompt}
               onEdit={onEdit}
               onCopy={handleCopy}
-              onExportMD={handleExportMD}
-              onExportJSON={handleExportJSON}
+              onExport={setExportPrompt}
               onViewHistory={setHistoryPromptId}
               onDelete={onDelete}
             />
@@ -395,6 +387,15 @@ export function PromptList({
         />
       )}
 
+      {exportPrompt && (
+        <ExportModal
+          prompt={exportPrompt}
+          onClose={() => setExportPrompt(null)}
+          onExportMD={handleExportMD}
+          onExportJSON={handleExportJSON}
+        />
+      )}
+
       <div className={`prompt-list ${viewMode}`} id="prompt-list">
         {prompts.map((_: Prompt, idx: number) => (
           <PromptRow

src/index.css

@@ -316,12 +316,6 @@ body {
   font-size: 1.1rem;
   line-height: 1.4;
   margin-bottom: 0.5rem;
-  height: 3rem; /* Fixed height for title to align cards */
-  display: -webkit-box;
-  line-clamp: 2;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
 }
 
 .prompt-actions {
@@ -1072,12 +1066,26 @@ button {
   margin-bottom: 1.5rem;
 }
 
+.prompt-list.grid .prompt-header h4 {
+  height: 3rem;
+  display: -webkit-box;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
 .prompt-list.list {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 }
 
+.prompt-list.list .prompt-card {
+  box-shadow: var(--shadow-sm);
+  border-left: 3px solid var(--primary-color);
+}
+
 .prompt-header {
   display: flex;
   justify-content: space-between;