From bdcb9a5bcc36d4fdc97ef9e4517009bbb3a9b10c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mustafa=20Arda=20D=C3=BC=C5=9Fova?= <info@madgrafik.com>
Date: Wed, 18 Sep 2024 16:55:27 +0300
Subject: [PATCH] =?UTF-8?q?Instagram=20Hikayesinde=20Payla=C5=9F=20Arka=20?=
 =?UTF-8?q?Plan=20Se=C3=A7imi=20D=C3=BCzenlemesi?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/MarkdownSnippet.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/components/MarkdownSnippet.tsx b/components/MarkdownSnippet.tsx
index 2b39912..ca9ea2a 100644
--- a/components/MarkdownSnippet.tsx
+++ b/components/MarkdownSnippet.tsx
@@ -205,17 +205,19 @@ const mergeImageWithBackground = async (apiImage: string, backgroundImage: strin
                         </Text>
                         <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
                             {backgrounds.map((background, index) => (
-                                <div key={index} style={{ width: 'calc(50% - 5px)' }}>
+                                <div key={index} style={{ flex: '1 1 calc(50% - 10px)', minWidth: '120px' }}>
                                     <Radio
                                         value={background}
                                         style={{
                                             display: 'flex',
                                             alignItems: 'center',
                                             padding: '10px',
-                                            backgroundColor: theme === 'dark' ? '#333333' : '#efefef',
+                                            backgroundColor: theme === 'dark' ? '#313131' : '#efefef',
                                             borderRadius: '8px',
                                             cursor: 'pointer',
                                             width: '100%',
+                                            flexDirection: 'row',
+                                            wordWrap: 'break-word'
                                         }}
                                         checked={selectedBackground === background}
                                         onChange={handleBackgroundSelect}
@@ -224,14 +226,14 @@ const mergeImageWithBackground = async (apiImage: string, backgroundImage: strin
                                             src={background}
                                             alt={`Arka Plan ${index + 1}`}
                                             style={{
-                                                width: '60px',
-                                                height: '60px',
+                                                width: '50px',
+                                                height: '50px',
                                                 marginRight: '10px',
                                                 borderRadius: '8px',
                                                 objectFit: 'cover',
                                             }}
                                         />
-                                        Arka Plan {index + 1}
+                                        <span style={{ flex: 1, textAlign: 'left', color: theme === 'dark' ? '#e0e0e0' : '#434242' }}>Arka Plan {index + 1}</span>
                                     </Radio>
                                 </div>
                             ))}