From 7461c294915300b8ced716b4189e0f56999cd061 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 16:36:52 +0000
Subject: [PATCH] Move share button below video information in modal

Update the `BunnyVideoModal` component to relocate the share button and its associated social media sharing options below the video's informational details.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 074b0e4c-6171-43bd-aa98-f9e04623ca14
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/074b0e4c-6171-43bd-aa98-f9e04623ca14/Sy6XHzr
---
 attached_assets/image_1756571758127.png     | Bin 0 -> 1797 bytes
 client/src/components/bunny-video-modal.tsx | 104 ++++++++++----------
 2 files changed, 53 insertions(+), 51 deletions(-)
 create mode 100644 attached_assets/image_1756571758127.png

diff --git a/attached_assets/image_1756571758127.png b/attached_assets/image_1756571758127.png
new file mode 100644
index 0000000000000000000000000000000000000000..7397803e2e12b9780910eede0bc262dd2f621e55
GIT binary patch
literal 1797
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

literal 0
HcmV?d00001

diff --git a/client/src/components/bunny-video-modal.tsx b/client/src/components/bunny-video-modal.tsx
index fe8e6ce..a5c00e6 100644
--- a/client/src/components/bunny-video-modal.tsx
+++ b/client/src/components/bunny-video-modal.tsx
@@ -189,57 +189,6 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
                 Bearbeiten
               </Button>
             )}
-            <div className="relative">
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => setShowShareMenu(!showShareMenu)}
-                className="text-white hover:bg-gray-700"
-                data-testid="button-share-video"
-              >
-                <Share2 className="w-4 h-4" />
-                Teilen
-              </Button>
-              
-              {showShareMenu && (
-                <div 
-                  className="absolute right-0 top-full mt-2 bg-gray-800 rounded-lg shadow-lg py-2 z-50 min-w-[200px]"
-                  style={{ backgroundColor: '#374151' }}
-                >
-                  <button
-                    onClick={shareOnFacebook}
-                    className="w-full px-4 py-2 text-left text-white hover:bg-gray-700 flex items-center gap-2"
-                    data-testid="button-share-facebook"
-                  >
-                    <FacebookIcon size={16} round />
-                    Facebook
-                  </button>
-                  <button
-                    onClick={shareOnTwitter}
-                    className="w-full px-4 py-2 text-left text-white hover:bg-gray-700 flex items-center gap-2"
-                    data-testid="button-share-twitter"
-                  >
-                    <TwitterIcon size={16} round />
-                    Twitter
-                  </button>
-                  <button
-                    onClick={shareOnWhatsApp}
-                    className="w-full px-4 py-2 text-left text-white hover:bg-gray-700 flex items-center gap-2"
-                    data-testid="button-share-whatsapp"
-                  >
-                    <WhatsappIcon size={16} round />
-                    WhatsApp
-                  </button>
-                  <button
-                    onClick={copyToClipboard}
-                    className="w-full px-4 py-2 text-left text-white hover:bg-gray-700"
-                    data-testid="button-copy-link"
-                  >
-                    Link kopieren
-                  </button>
-                </div>
-              )}
-            </div>
             <Button
               variant="ghost"
               size="sm"
@@ -310,6 +259,59 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
                 <span data-testid="text-video-date">{formatDate(video.createdAt)}</span>
               </div>
 
+              {/* Share button below video info */}
+              <div className="relative mb-3">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setShowShareMenu(!showShareMenu)}
+                  className="text-white border-white/20 hover:bg-white/10"
+                  data-testid="button-share-video"
+                >
+                  <Share2 className="w-4 h-4 mr-2" />
+                  Teilen
+                </Button>
+                
+                {showShareMenu && (
+                  <div 
+                    className="absolute left-0 top-full mt-2 bg-gray-800 rounded-lg shadow-lg py-2 z-50 min-w-[200px]"
+                    style={{ backgroundColor: '#374151' }}
+                  >
+                    <button
+                      onClick={shareOnFacebook}
+                      className="w-full px-4 py-2 text-left text-white hover:bg-gray-700 flex items-center gap-2"
+                      data-testid="button-share-facebook"
+                    >
+                      <FacebookIcon size={16} round />
+                      Facebook
+                    </button>
+                    <button
+                      onClick={shareOnTwitter}
+                      className="w-full px-4 py-2 text-left text-white hover:bg-gray-700 flex items-center gap-2"
+                      data-testid="button-share-twitter"
+                    >
+                      <TwitterIcon size={16} round />
+                      Twitter
+                    </button>
+                    <button
+                      onClick={shareOnWhatsApp}
+                      className="w-full px-4 py-2 text-left text-white hover:bg-gray-700 flex items-center gap-2"
+                      data-testid="button-share-whatsapp"
+                    >
+                      <WhatsappIcon size={16} round />
+                      WhatsApp
+                    </button>
+                    <button
+                      onClick={copyToClipboard}
+                      className="w-full px-4 py-2 text-left text-white hover:bg-gray-700"
+                      data-testid="button-copy-link"
+                    >
+                      Link kopieren
+                    </button>
+                  </div>
+                )}
+              </div>
+
               {video.description && (
                 <div className="text-sm text-gray-300">
                   <p className="leading-relaxed whitespace-pre-wrap break-words" data-testid="text-video-description">