Update app.py

app.py

@@ -58,28 +58,29 @@ html, body, .stApp {
 }
 
 @media (min-width: 768px) {
-    /* Reset default margins and padding */
+    /* Reset and base styles */
     html, body {
-        margin: 1 !important;
+        margin: 0 !important;
         padding: 0 !important;
-        background: #f0f0f0 !important; /* رنگ پس‌زمینه خاکستری روشن */
+        background: #f0f0f0 !important;
         height: 100vh !important;
+        width: 100vw !important;
         overflow: hidden !important;
     }
-    
-    /* Container for the mobile frame */
+
+    /* Main container to center the mobile frame */
     body {
         display: flex !important;
         justify-content: center !important;
         align-items: center !important;
-        background: #f0f0f0 !important; /* مطمئن شوید این رنگ با رنگ پس‌زمینه کادر موبایل متفاوت نیست */
+        padding: 20px !important; /* فضای اطراف کادر موبایل */
     }
-    
-    /* Mobile frame styling */
+
+    /* Mobile frame styling - now perfectly centered */
     [data-testid="stAppViewContainer"] {
         width: 475px !important;
         height: 667px !important;
-        margin: 0 auto !important;  
+        margin: 0 !important; /* حذف margin اتوماتیک */
         border: 12px solid #000 !important;
         border-radius: 40px !important;
         box-shadow: 
@@ -95,21 +96,12 @@ html, body, .stApp {
         position: relative !important;
     }
 
-    /* Remove any potential dark background from parent elements */
-    #root, .stApp {
-        background: transparent !important;
-        padding: 0 !important;
-        margin: 0 !important;
-    }
-
-    /* Ensure Streamlit's main container doesn't add extra space */
+    /* پدینگ برای محتوای داخل کادر موبایل */
     [data-testid="stAppViewContainer"] > div {
-        max-width: 100% !important;
-        padding: 0 !important;
-        margin: 0 !important;
+        padding: 0 5px !important; /* 5px padding راست و چپ */
     }
 
-    /* Webkit scrollbar styles */
+    /* تنظیمات اسکرولبار */
     [data-testid="stAppViewContainer"]::-webkit-scrollbar {
         width: 6px !important;
         right: 0 !important;
@@ -127,14 +119,8 @@ html, body, .stApp {
         border-radius: 3px !important;
         margin-left: 10px !important;
     }
-    
-    /* Reset direction for content */
-    [data-testid="stAppViewContainer"] > * {
-        direction: ltr !important;
-        text-align: right !important;
-    }
-    
-    /* Virtual home button */
+
+    /* دکمه هوم مجازی */
     [data-testid="stAppViewContainer"]::after {
         content: "";
         position: absolute;
@@ -146,6 +132,15 @@ html, body, .stApp {
         background: #333;
         border-radius: 2px;
     }
+
+    /* اطمینان از نمایش صحیح محتوا */
+    [data-testid="block-container"] {
+        padding: 0 5px !important;
+    }
+    
+    .stApp > div {
+        padding: 0 5px !important;
+    }
 }
 
 /* هدر راهیار */