fix modal fit to mobile screen

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: 100%; /* Ensure the photo fills the container */
-    width:280px;
+    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: 5px 0;
-    padding-bottom: 5px;
-    padding-left: 18px;
 }
 
 #table-nominee tbody tr {