fix

Author: Snowiiii

src/App.css

@@ -845,6 +845,48 @@ h1, h2, h3 { font-weight: 900; letter-spacing: -1px; }
   line-height: 1.65;
   margin: 0;
 }
+
+/* Paste this into your index.css, replacing the old .btn.btn-outline GitHub anchor styles */
+
+/* ── GitHub source link ── */
+.btn-github-link {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 0.5rem;
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 0.78rem;
+  font-weight: 500;
+  font-family: var(--font-mono);
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 0.18s;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.btn-github-link span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.btn-github-link:hover {
+  color: var(--text);
+}
+
+.btn-github-link svg {
+  opacity: 0.5;
+  transition: opacity 0.18s;
+}
+
+.btn-github-link:hover svg {
+  opacity: 0.8;
+}
 
 /* Empty state */
 .empty-reviews-prompt {

src/pages/PluginDetail.tsx

@@ -92,6 +92,16 @@ const getInitials = (username: string) => {
   return username.slice(0, 2).toUpperCase();
 };
 
+// Resolve a media path to a full URL, stripping /api suffix from baseURL if present
+const getMediaUrl = (path: string): string => {
+  if (!path) return '';
+  if (path.startsWith('http://') || path.startsWith('https://')) return path;
+  const base = ((api.defaults as any)?.baseURL || '')
+    .replace(/\/api\/?$/, '')
+    .replace(/\/$/, '');
+  return `${base}${path.startsWith('/') ? '' : '/'}${path}`;
+};
+
 const PluginDetail = () => {
   const { t } = useTranslation();
   const { id } = useParams();
@@ -134,7 +144,9 @@ const PluginDetail = () => {
       const res = await api.get(`/plugins/${id}`);
       setPlugin(res.data);
       setCurrentDescription(res.data.description || '');
-      if (res.data.screenshots?.length > 0) setMainScreenshot(res.data.screenshots[0]);
+      if (res.data.screenshots?.length > 0) {
+        setMainScreenshot(res.data.screenshots[0]);
+      }
     } catch (err) {
       console.error('Fetch error:', err);
     } finally {
@@ -293,6 +305,11 @@ const PluginDetail = () => {
     }
   };
 
+  // Derive the GitHub repo label from the source link
+  const githubLabel = plugin.source_link
+    ? plugin.source_link.replace(/^https?:\/\/(www\.)?github\.com\//, '')
+    : '';
+
   return (
     <div className="container">
       <SEO 
@@ -349,17 +366,23 @@ const PluginDetail = () => {
           {plugin.screenshots?.length > 0 && (
             <section className="screenshots-premium">
               <div className="main-screenshot-wrapper">
-                <img src={mainScreenshot || plugin.screenshots[0]} alt="Plugin Preview" className="main-screenshot" />
+                <img
+                  src={getMediaUrl(mainScreenshot || plugin.screenshots[0])}
+                  alt="Plugin Preview"
+                  className="main-screenshot"
+                  onError={e => { (e.target as HTMLImageElement).style.display = 'none'; }}
+                />
               </div>
               {plugin.screenshots.length > 1 && (
                 <div className="screenshot-thumbnails">
                   {plugin.screenshots.map((s: string, i: number) => (
                     <img 
                       key={i} 
-                      src={s} 
+                      src={getMediaUrl(s)}
                       alt="Thumbnail" 
                       className={`thumb ${mainScreenshot === s ? 'active' : ''}`}
                       onClick={() => setMainScreenshot(s)}
+                      onError={e => { (e.target as HTMLImageElement).style.display = 'none'; }}
                     />
                   ))}
                 </div>
@@ -455,7 +478,8 @@ const PluginDetail = () => {
               )
             ) : (
               <div className="auth-notice">
-                {t('reviews.login_to_rate')} <Link to="/login">{t('login').toLowerCase()}</Link>.              </div>
+                {t('reviews.login_to_rate')} <Link to="/login">{t('login').toLowerCase()}</Link>.
+              </div>
             )}
           </section>
         </div>
@@ -477,9 +501,7 @@ const PluginDetail = () => {
                 <div>
                   {plugin.sale_active && plugin.sale_discount_percent > 0 ? (
                     <div style={{ display: 'flex', flexDirection: 'column', gap: '0.2rem' }}>
-                      {/* Sale price prominent */}
                       <PriceDisplay cents={Math.round(plugin.price_cents * (1 - plugin.sale_discount_percent / 100))} />
-                      {/* Original price struck through */}
                       <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                         <span style={{ fontSize: '0.85rem', color: 'var(--text-muted)', textDecoration: 'line-through', fontFamily: 'var(--font-mono)' }}>
                           €{(plugin.price_cents / 100).toFixed(2)}
@@ -508,17 +530,16 @@ const PluginDetail = () => {
             </button>
 
             {plugin.source_link && (
-              <a 
-                href={plugin.source_link} 
-                target="_blank" 
-                rel="noopener noreferrer" 
-                className="btn btn-outline"
-                style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px', fontSize: '0.85rem' }}
+              <a
+                href={plugin.source_link}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="btn-github-link"
               >
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style={{ flexShrink: 0 }}>
                   <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                 </svg>
-                {plugin.source_link.replace(/^https?:\/\/(www\.)?github\.com\//, '')}
+                <span>{githubLabel}</span>
               </a>
             )}
 
@@ -527,7 +548,6 @@ const PluginDetail = () => {
               <div className="stat-item"><strong>{plugin.views.toLocaleString()}</strong> {t('plugins.views')}</div>
               <div className="stat-item">{t('plugins.category')}: <strong>{plugin.category}</strong></div>
 
-              {/* ADD THESE TWO */}
               {plugin.version && (
                 <div className="stat-item">{t('plugins.version')}: <strong>{plugin.version}</strong></div>
               )}
@@ -585,4 +605,4 @@ const PluginDetail = () => {
   );
 };
 
-export default PluginDetail;
+export default PluginDetail;