update guide col

src/app.py

@@ -88,7 +88,16 @@ async def main():
     ) = get_filter_values(df)
 
     # Create main layout with sidebar for contribution guide
-    main_col, guide_col = st.columns([0.8, 0.2])
+    # Adjust column ratio based on guide visibility
+    if "show_guide" not in st.session_state:
+        st.session_state.show_guide = True
+
+    main_col, guide_col = st.columns(
+        [
+            0.9 if not st.session_state.show_guide else 0.8,
+            0.1 if not st.session_state.show_guide else 0.2,
+        ]
+    )
 
     with main_col:
         # Render filters

src/components/header.py

@@ -36,34 +36,32 @@ def render_contribution_guide():
                 """
             )
 
-            # Store badges in a row container
-            st.markdown('<div class="store-badges-row">', unsafe_allow_html=True)
-
-            # Google Play badge
-            playstore_badge = Path("src/static/images/GetItOnGooglePlay_Badge.png")
-            if playstore_badge.exists():
-                st.markdown(
-                    f'<a href="https://play.google.com/store/apps/details?id=com.pocketpalai" target="_blank">'
-                    f'<img src="data:image/png;base64,{get_image_base64(playstore_badge)}" '
-                    'class="store-badge" alt="Get it on Google Play">'
-                    "</a>",
-                    unsafe_allow_html=True,
-                )
+            col1, col2 = st.columns([0.5, 0.5])
+            with col1:
+                # Google Play badge
+                playstore_badge = Path("src/static/images/GetItOnGooglePlay_Badge.png")
+                if playstore_badge.exists():
+                    st.markdown(
+                        f'<a href="https://play.google.com/store/apps/details?id=com.pocketpalai" target="_blank">'
+                        f'<img src="data:image/png;base64,{get_image_base64(playstore_badge)}" '
+                        'class="store-badge" alt="Get it on Google Play">'
+                        "</a>",
+                            unsafe_allow_html=True,
+                        )
 
-            # App Store badge
-            appstore_badge = Path(
-                "src/static/images/Download_on_the_App_Store_Badge.svg"
-            )
-            if appstore_badge.exists():
-                st.markdown(
-                    f'<a href="https://apps.apple.com/de/app/pocketpal-ai/id6502579498" target="_blank">'
-                    f'<img src="data:image/svg+xml;base64,{get_image_base64(appstore_badge)}" '
-                    'class="store-badge" alt="Download on the App Store">'
-                    "</a>",
-                    unsafe_allow_html=True,
+            with col2:
+                # App Store badge
+                appstore_badge = Path(
+                    "src/static/images/Download_on_the_App_Store_Badge.svg"
                 )
-
-            st.markdown("</div>", unsafe_allow_html=True)
+                if appstore_badge.exists():
+                    st.markdown(
+                        f'<a href="https://apps.apple.com/de/app/pocketpal-ai/id6502579498" target="_blank">'
+                        f'<img src="data:image/svg+xml;base64,{get_image_base64(appstore_badge)}" '
+                        'class="store-badge" alt="Download on the App Store">'
+                        "</a>",
+                        unsafe_allow_html=True,
+                    )
 
             # Quick steps
             st.markdown(
@@ -89,7 +87,7 @@ def render_contribution_guide():
 
     else:
         # Show restore button when guide is dismissed
-        if st.button("Show Guide", help="Show contribution guide"):
+        if st.button("Guide", help="Show contribution guide"):
             st.session_state.show_guide = True
             st.rerun()
 
@@ -100,7 +98,15 @@ def render_header():
     pocketpal_logo_path = Path("src/static/images/pocketpal-ai-logo.png")
 
     # Create header columns with the same ratio as main content
-    header_main, header_side = st.columns([0.8, 0.2])
+    if "show_guide" not in st.session_state:
+        st.session_state.show_guide = True
+
+    header_main, header_side = st.columns(
+        [
+            0.9 if not st.session_state.show_guide else 0.8,
+            0.1 if not st.session_state.show_guide else 0.2,
+        ]
+    )
 
     with header_main:
         header_html = f"""

src/core/styles.py

@@ -84,28 +84,26 @@ CUSTOM_CSS = """
         color: #666;
         margin: 0.5rem 0;
     }
-    /* Dismiss button styling */
+    /* Show/Dismiss button styling */
     div[data-testid="column"]:last-child button {
         float: right;
         background: transparent;
         border: none;
         color: #666;
         padding: 0.2rem 0.4rem;
-        font-size: 1rem;
+        font-size: 0.9rem;
         line-height: 1;
         transition: all 0.2s;
+        width: 100%;
+        text-align: center;
+        margin-top: 0.5rem;
     }
     div[data-testid="column"]:last-child button:hover {
         color: #333;
+        background-color: #f0f0f0;
+        border-radius: 4px;
     }
     /* Store badges styling */
-    .store-badges-row {
-        display: flex;
-        justify-content: center;
-        gap: 10px;
-        margin: 10px 0;
-        flex-wrap: wrap;
-    }
     .store-badge {
         height: 35px;
         transition: transform 0.2s;