Merge pull request #49 from dergigi/highlights-feed-etc

Improve highlights rendering and explore layout

src/components/Explore.tsx

@@ -595,7 +595,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
       case 'highlights':
         if (showSkeletons) {
           return (
-            <div className="explore-grid">
+            <div className="explore-grid single-column">
               {Array.from({ length: 8 }).map((_, i) => (
                 <HighlightSkeleton key={i} />
               ))}
@@ -607,7 +607,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, eventStore, settings, acti
             <span>No highlights to show for the selected scope.</span>
           </div>
         ) : (
-          <div className="explore-grid">
+          <div className="explore-grid single-column">
             {classifiedHighlights.map((highlight) => (
               <HighlightItem
                 key={highlight.id}

src/components/HighlightItem.tsx

@@ -509,6 +509,38 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
     }
   }
   
+  const renderHighlightText = () => {
+    const { content, context } = highlight
+    
+    if (context && context.length > 0) {
+      const index = context.indexOf(content)
+      
+      if (index >= 0) {
+        const before = context.slice(0, index)
+        const after = context.slice(index + content.length)
+        
+        return (
+          <>
+            {before}
+            <span className="highlight-core">{content}</span>
+            {after}
+          </>
+        )
+      }
+      
+      // Fallback: show context and the core highlight separately
+      return (
+        <>
+          <span className="highlight-context-prefix">{context}</span>
+          <br />
+          <span className="highlight-core">{content}</span>
+        </>
+      )
+    }
+    
+    return <span className="highlight-core">{content}</span>
+  }
+  
   return (
     <>
     <div 
@@ -588,7 +620,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
           style={{ cursor: 'pointer' }}
           title="Go to quote in article"
         >
-          {highlight.content}
+          {renderHighlightText()}
         </blockquote>
         
         {showCitation && (

src/styles/components/cards.css

@@ -263,7 +263,12 @@
 .large-read-button:hover { background: var(--color-primary-hover); }
 
 /* Blog cards (Explore) */
-.explore-container { padding: 2rem; max-width: 1400px; margin: 0 auto; min-height: 100vh; }
+.explore-container {
+  padding: 2rem;
+  max-width: var(--main-max-width);
+  margin: 0 auto;
+  min-height: 100vh;
+}
 .explore-header { text-align: center; margin-bottom: 3rem; }
 .explore-header h1 { font-size: 2.5rem; margin: 0 0 1rem 0; color: var(--color-primary); display: flex; align-items: center; justify-content: center; gap: 1rem; }
 .explore-subtitle { font-size: 1.125rem; color: var(--color-text-secondary); margin: 0; }
@@ -272,7 +277,15 @@
 .explore-loading { min-height: 0; padding: 0.25rem 0; }
 .explore-error { color: rgb(239 68 68); /* red-500 */ }
 .explore-empty { color: var(--color-text-secondary); }
-.explore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; margin-top: 2rem; }
+.explore-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 2rem;
+  margin-top: 2rem;
+}
+.explore-grid.single-column {
+  grid-template-columns: 1fr;
+}
 .blog-post-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; transition: all 0.3s ease; cursor: pointer; display: flex; flex-direction: column; height: 100%; }
 .blog-post-card:hover { border-color: var(--color-primary); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15); }
 .blog-post-card.level-mine { border-color: color-mix(in srgb, var(--highlight-color-mine, #fde047) 60%, #333); box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-mine, #fde047) 25%, transparent); }

src/styles/layout/highlights.css

@@ -149,7 +149,40 @@
 .highlight-item.level-nostrverse .highlight-quote-icon { color: var(--highlight-color-nostrverse, #9333ea); }
 
 .highlight-content { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; padding: 2.25rem 0.75rem 2.5rem; }
-.highlight-text { margin: 0; padding: 0 0 0 1.25rem; font-style: italic; color: var(--color-text); line-height: 1.6; border-left: none; font-size: 0.95rem; }
+.highlight-text {
+  margin: 0;
+  padding: 0 0 0 1.25rem;
+  font-style: italic;
+  color: var(--color-text);
+  line-height: 1.6;
+  border-left: none;
+  font-size: 0.95rem;
+  /* Aggressive wrapping for long words/URLs inside highlights */
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  hyphens: auto;
+}
+.highlight-core {
+  background: color-mix(in srgb, var(--highlight-color, #fde047) 35%, transparent);
+  padding: 0 0.1em;
+  border-radius: 3px;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+.highlight-item.level-mine .highlight-core {
+  background: color-mix(in srgb, var(--highlight-color-mine, #fde047) 40%, transparent);
+}
+.highlight-item.level-friends .highlight-core {
+  background: color-mix(in srgb, var(--highlight-color-friends, #f97316) 35%, transparent);
+}
+.highlight-item.level-nostrverse .highlight-core {
+  background: color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 35%, transparent);
+}
+.highlight-context-prefix {
+  display: block;
+  margin-bottom: 0.35rem;
+}
 .highlight-citation { margin-left: 1.25rem; font-size: 0.8rem; color: var(--color-text-secondary); font-style: normal; padding-top: 0.25rem; }
 .highlight-comment { margin-top: 0.5rem; padding: 0.75rem; border-radius: 4px; font-size: 0.875rem; color: var(--color-text); line-height: 1.5; display: flex; gap: 0.5rem; align-items: flex-start; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; min-width: 0; }
 .highlight-comment-icon { flex-shrink: 0; margin-top: 0.125rem; }