fix css signin button

src/synthetic_dataset_generator/_tabbedinterface.py

@@ -62,7 +62,7 @@ class TabbedInterface(Blocks):
             h3 = "<div style='text-align: center;'><h2>Build datasets using natural language</h2></div>"
             if title:
                 gr.HTML(value=title + h3)
-            gr.LoginButton(value="Sign in", variant="primary", scale=2)
+            gr.LoginButton(value="Sign in", variant="primary", elem_id="sign_in_button")
             with Tabs():
                 for interface, tab_name in zip(interface_list, tab_names, strict=False):
                     with Tab(label=tab_name):

src/synthetic_dataset_generator/app.py

@@ -14,6 +14,7 @@ button[role="tab"][aria-selected="true"]:hover {border-color: var(--button-prima
 .gallery-item {background: var(--background-fill-secondary); text-align: left}
 #system_prompt_examples { color: var(--body-text-color) !important; background-color: var(--block-background-fill) !important;}
 .container {padding-inline: 0 !important}
+#sign_in_button { flex-grow: 0; width: 50% !important; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
 """
 
 image = """<br><img src="https://raw.githubusercontent.com/argilla-io/synthetic-data-generator/main/assets/logo.svg" alt="Synthetic Data Generator Logo" style="display: block; margin-left: auto; margin-right: auto; width: clamp(50%, 400px, 100%)"/>"""