From e67434dbc80277982ecf55386294ae9599579cc1 Mon Sep 17 00:00:00 2001
From: nurafrinaalimi16 <nurafrinaalimi16@gmail.com>
Date: Wed, 24 Apr 2024 16:07:21 +0800
Subject: [PATCH] fix modal fit to mobile screen

---
 .../js/components/demo/voter/home/index.vue   | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/resources/assets/js/components/demo/voter/home/index.vue b/resources/assets/js/components/demo/voter/home/index.vue
index f214e20..2fc7065 100644
--- a/resources/assets/js/components/demo/voter/home/index.vue
+++ b/resources/assets/js/components/demo/voter/home/index.vue
@@ -96,7 +96,7 @@
                         </div>
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
                     </div>
                 </div>
             </div>
@@ -190,31 +190,33 @@ export default {
 
 <style>
 #view-nominee-modal .modal-dialog {
-    width: 850px;
+    max-width: 850px; /* Set a maximum width */
+    width: 100%; /* Ensure full width on smaller screens */
 }
 
 #view-nominee-modal .nominee-viewed-photo {
-    height:320px;
-    width:280px;
+    width: 100%; /* Ensure the photo fills the container */
+    height: auto; /* Maintain aspect ratio */
 }
 
 #view-nominee-modal .content {
     display: flex;
+    flex-wrap: wrap; /* Allow content to wrap on smaller screens */
 }
 
 #view-nominee-modal .photo-section {
-    flex: 4;
+    flex: 0 0 40%; /* Set a flexible width for the photo section */
+    max-width: 300px; /* Set a maximum width */
+    margin-right: 20px; /* Add space between photo and details */
 }
 
 #view-nominee-modal .detail-section {
-    flex: 8;
+    flex: 1; /* Take remaining space */
 }
 
 #view-nominee-modal span {
     display: block;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    padding-left: 18px;
+    padding: 5px 0;
 }
 
 #table-nominee tbody tr {