Files
aethas-free/modules/ui_components.py
T
xavier 57db888e89
Build and Push Docker Image / build-and-push (push) Successful in 35s
Améliorations BO3
2026-08-29 11:18:17 +02:00

353 lines
25 KiB
Python
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import os
import requests
from fasthtml.common import *
from modules.database import load_history
from modules.billing_manager import obtenir_solde
def get_openrouter_stats():
api_key = os.getenv("OPENROUTER_API_KEY")
if not api_key: return {}
try:
resp = requests.get("https://openrouter.ai/api/v1/auth/key", headers={"Authorization": f"Bearer {api_key}"}, timeout=3)
if resp.status_code == 200:
return resp.json().get("data", {})
except: pass
return {}
def render_user_msg(text):
return Div(P(text, style="margin:0; font-weight:bold; white-space: pre-wrap;"), cls="user-bubble")
def render_ai_msg(text, intention, nom_fournisseur, nom_modele, couleur, execution_time=None, trace=None, prompt_associe="", thematique="general", msg_id=""):
time_badge = Span(f"⏱️ {execution_time}s", style="margin-right: 10px; color:#aaa; font-size:0.8em;") if execution_time else ""
trace_html = ""
if trace and isinstance(trace, list):
badges = [Span(t, style="font-size:0.75em; background:#222; padding:2px 6px; border-radius:4px; border:1px solid #444;") for t in trace]
trace_html = Div(Span("Route : ", style="color:#888; font-size:0.75em;"), *badges, style="display:flex; gap:5px; align-items:center; margin-bottom:8px; flex-wrap:wrap;")
encart_info = Div(
Span(f"🎯 {intention}", style="margin-right: 10px; color:#aaa; font-size:0.8em;"),
Span(f"🏢 {nom_fournisseur}", style="margin-right: 10px; color:#aaa; font-size:0.8em;"),
Span(f"🧠 {nom_modele}", style=f"margin-right: 10px; color:{couleur}; font-weight:bold; font-size:0.8em;"),
time_badge, style="border-bottom: 1px solid #333; padding-bottom: 10px; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 5px;"
)
bouton_forcer = ""
if msg_id and prompt_associe and thematique != "aucun":
safe_prompt = prompt_associe.replace('"', '\\"').replace('\n', ' ')
safe_reponse = text.replace('"', '\\"').replace('\n', ' ')
valeurs_htmx = f'{{"prompt": "{safe_prompt}", "reponse": "{safe_reponse}", "theme": "{thematique}"}}'
bouton_forcer = Button("💾 Mémoriser",
hx_post="/api/forcer_rag",
hx_vals=valeurs_htmx,
hx_target=f"#badge-rag-{msg_id}",
hx_swap="outerHTML",
id=f"badge-rag-{msg_id}",
cls="msg-action-btn",
style="color: #4caf50; border-color: #4caf50;"
)
actions = Div(
bouton_forcer,
Button("📄 PDF", onclick="downloadResponsePDF(this)", cls="msg-action-btn", title="Télécharger en PDF"),
Button("📘 DOC", onclick="downloadResponseDOC(this)", cls="msg-action-btn", title="Télécharger en Word"),
Button("📝 TXT", onclick="downloadResponseTXT(this)", cls="msg-action-btn", title="Télécharger en Texte"),
Button("🗄️ JSON", onclick="downloadResponseJSON(this)", cls="msg-action-btn", title="Télécharger en JSON"),
Button("💬 WhatsApp", onclick="shareWhatsApp(this)", cls="msg-action-btn", title="Partager sur WhatsApp"),
Button("📧 Email", onclick="shareEmail(this)", cls="msg-action-btn", title="Envoyer par courriel"),
cls="msg-actions"
)
return Div(
trace_html,
encart_info,
Div(text, cls="markdown-raw", style="display:none;"),
Div(cls="markdown-rendered", style="line-height: 1.6;"),
actions,
cls="ai-bubble",
style=f"border-left: 4px solid {couleur};"
)
def render_sidebar():
history = load_history()
sorted_chats = sorted(history.items(), key=lambda x: (not x[1].get('pinned', False), -x[1].get('timestamp', 0)))
items = []
for chat_id, data in sorted_chats:
pin_icon = "📌" if data.get('pinned', False) else "📍"
items.append(Div(A(Span(data['title'], style="color:inherit;"), href=f"/load_chat/{chat_id}", cls="history-link"), Button(pin_icon, cls="history-btn", hx_post=f"/pin/{chat_id}", hx_target="#sidebar-content", hx_swap="outerHTML"), Button("✏️", cls="history-btn", hx_post=f"/rename/{chat_id}", hx_prompt="Nouveau nom :", hx_target="#sidebar-content", hx_swap="outerHTML"), Button("🗑️", cls="history-btn", hx_post=f"/delete/{chat_id}", hx_target="#sidebar-content", hx_swap="outerHTML"), cls="history-item", id=f"chat-item-{chat_id}"))
return Div(*items, id="sidebar-content", cls="sidebar-history", hx_swap_oob="true")
def render_main_page(chat_id, utilisateur_nom="xavier", role="Super Admin"):
history = load_history()
messages_ui = []
if chat_id in history:
for msg in history[chat_id].get('messages', []):
if msg['role'] == 'user':
messages_ui.append(render_user_msg(msg['content']))
else:
messages_ui.append(render_ai_msg(
msg['content'],
msg.get('intention', ''),
msg.get('fournisseur', ''),
msg.get('modele', ''),
msg.get('couleur', '#333'),
msg.get('execution_time', ''),
msg.get('trace', []),
msg.get('prompt_associe', ''),
msg.get('thematique', 'general'),
msg.get('msg_id', '')
))
if messages_ui: messages_ui.append(Script("setTimeout(renderMarkdown, 150);"))
auto_refresh_script = Script('''
let serverDown = false;
setInterval(() => {
fetch('/ping', {cache: 'no-store'})
.then(response => { if (serverDown && response.ok) { window.location.reload(); } })
.catch(() => { serverDown = true; console.log("Serveur hors ligne..."); });
}, 5000);
function checkMediaPaymentWarning() {
const mediaMode = document.querySelector('input[name="media_mode"]:checked').value;
const isPayant = document.getElementById('mode-payant-toggle').checked;
const warningDiv = document.getElementById('media-warning');
if (mediaMode === 'video' && !isPayant) {
warningDiv.style.display = 'block';
warningDiv.innerHTML = '⚠️ La génération vidéo gratuite est très limitée ou inexistante. Cochez "Payant" pour de meilleurs résultats.';
} else if (mediaMode === 'image' && !isPayant) {
warningDiv.style.display = 'block';
warningDiv.innerHTML = 'ℹ️ Mode image gratuit : Qualité standard (HuggingFace). Pour la HD, cochez "Payant".';
} else {
warningDiv.style.display = 'none';
}
}
''')
solde_perso = obtenir_solde(utilisateur_nom)
if role.lower() in ["super admin", "admin"]:
stats_or = get_openrouter_stats()
limit_rem = float(stats_or.get('limit_remaining') or 0.0)
usage_daily = float(stats_or.get('usage_daily') or 0.0)
usage_monthly = float(stats_or.get('usage_monthly') or 0.0)
badge_finance = Div(
P(f"👤 {utilisateur_nom.capitalize()} ({role})", style="color: #00e5ff; margin: 0; font-weight: bold; font-size: 0.9em;"),
P(f"💳 Solde personnel : {solde_perso:.2f} $", style="color: #00e5ff; margin: 2px 0; font-size: 0.85em; font-weight: bold;"),
P(f"🏦 Cagnotte globale : {obtenir_solde('xavier'):.2f} $", style="color: #4caf50; margin: 0; font-size: 0.8em; font-weight: bold;"),
P(f"🌐 OR Restant : {limit_rem:.4f} $", style="color: #ff9800; margin: 2px 0 0; font-size: 0.8em; font-weight: bold;"),
P(f"📊 OR Conso (Jour/Mois) : {usage_daily:.4f}$ / {usage_monthly:.4f}$", style="color: #8bc34a; margin: 0; font-size: 0.75em;"),
style="padding: 10px; background: #181818; border-radius: 6px; border: 1px solid #333;"
)
else:
badge_finance = Div(P(f"👤 {utilisateur_nom.capitalize()} ({role})", style="color: #fff; margin: 0; font-weight: bold; font-size: 0.9em;"), P(f"💳 Solde disponible : {solde_perso:.2f} $", style="color: #00e5ff; margin: 2px 0 0; font-size: 0.85em;"), style="padding: 10px; background: #181818; border-radius: 6px; border: 1px solid #333;")
return Title("Aethas38 - Core"), Body(
auto_refresh_script,
Div(
Div(
Img(src="/Logo/logo_aethas.svg", style="max-width: 80%; height: auto; display: block; margin: 0 auto 20px;"),
Div(
A("+ Nouvelle discussion", href="/new_chat", cls="new-chat-btn"),
A("💾 Exporter JSON", href="/export_json", target="_blank", cls="export-btn"),
# Bouton d'accès rapide au Back Office (FO -> BO)
A("⚙️ Back Office", href="/backoffice", cls="export-btn", style="background-color: #3f51b5; color: white; border-color: #3f51b5; margin-top: 5px; text-decoration: none; text-align: center; font-weight: bold;"),
# Bouton de recharger les crédits
Button("💳 Recharger des crédits", onclick="document.getElementById('modal-recharge-paypal').style.display='flex'", cls="export-btn", style="background-color: #00e5ff; color: black; border: none; margin-top: 5px; font-weight: bold; cursor: pointer;"),
# Lien de don direct basé sur le .env
A("❤️ Faire un don", href=os.getenv("PAYPAL_DONATION_LINK", "#"), target="_blank", cls="export-btn", style="background-color: #ff4081; color: white; border-color: #ff4081; margin-top: 5px; text-decoration: none; text-align: center; font-weight: bold;"),
Button("📚 Gestion RAG", hx_get="/admin/rag_modal", hx_target="body", hx_swap="beforeend", cls="export-btn", style="background-color: #2196f3; color: white; border-color: #2196f3; margin-top: 5px; cursor: pointer;") if role.lower() in ["super admin", "admin"] else "",
A("📊 Export URSSAF (Excel)", href="/admin/export_comptable", cls="export-btn", style="background-color: #4caf50; color: white; border-color: #4caf50; margin-top: 5px; text-decoration: none; text-align: center;") if role.lower() in ["super admin", "admin"] else "",
A("🚪 Déconnexion", href="/logout", cls="export-btn", style="background-color: #8b0000; color: white; border-color: #8b0000; margin-top: 5px;"),
cls="nav-buttons", style="display: flex; flex-direction: column; gap: 10px;"
), cls="sidebar-top"
),
render_sidebar(), Div(badge_finance, cls="sidebar-footer"), cls="sidebar"
),
Div(
Div(Button("☰", onclick="toggleSidebar()", cls="hamburger-btn"), Img(src="/Logo/logo_aethas.svg", style="height: 30px;"), Div(style="width: 30px;"), cls="mobile-header"),
Div(*messages_ui, id="chat-history", cls="chat-container"),
Div(Div(Div(cls="tech-spinner"), Span("Analyse en cours... (~5s à 10s)"), cls="tech-loader-container"), id="global-loader", cls="htmx-indicator"),
Div(
Form(
Input(type="hidden", name="chat_id", value=chat_id),
Div(
Div(
Label(Input(type="radio", name="media_mode", value="texte", checked=True, onchange="checkMediaPaymentWarning()"), "📝 Texte", cls="media-btn"),
Label(Input(type="radio", name="media_mode", value="image", onchange="checkMediaPaymentWarning()"), "🎨 Image", cls="media-btn"),
Label(Input(type="radio", name="media_mode", value="video", onchange="checkMediaPaymentWarning()"), "🎬 Vidéo", cls="media-btn"),
style="display: flex; gap: 15px; justify-content: center; margin-bottom: 10px;"
),
Div(id="media-warning", style="display:none; color: #ff9800; font-size: 0.8em; text-align: center; margin-bottom: 10px;"),
Div(id="file-preview-list"),
Div(
Label("+", _for="file-upload", cls="file-btn"),
Input(type="file", name="files", id="file-upload", multiple=True, style="display:none;", onchange="handleFileSelection(this)"),
Textarea(name="prompt", id="prompt-input", placeholder="Requête, lien ou glissez vos fichiers ici...", cls="input-field", rows="1", oninput="autoResize(this)"),
Button("↑", type="submit", cls="btn-submit"), cls="textarea-wrapper"
),
Div(
Label(Input(type="checkbox", name="mode_education", id="mode-education-toggle", style="margin-right: 6px; accent-color: #8bc34a; cursor: pointer;"), "🎓 Éducation", style="color: #aaa; font-size: 0.85em; display: flex; align-items: center; cursor: pointer; white-space: nowrap;"),
Label(Input(type="checkbox", name="mode_payant", id="mode-payant-toggle", style="margin-right: 6px; accent-color: #00e5ff; cursor: pointer;", onchange="checkMediaPaymentWarning()"), "👑 Payant", style="color: #aaa; font-size: 0.85em; display: flex; align-items: center; cursor: pointer; white-space: nowrap;"),
Label(Input(type="checkbox", name="mode_multi_ia", id="mode-multi-toggle", style="margin-right: 6px; accent-color: #d97757; cursor: pointer;"), "⚡ Multi-IA", style="color: #aaa; font-size: 0.85em; display: flex; align-items: center; cursor: pointer; white-space: nowrap;"),
cls="options-row"
), cls="input-container-box"
), hx_post="/chat", hx_target="#chat-history", hx_swap="beforeend", hx_indicator="#global-loader", hx_on__after_request="this.reset(); document.getElementById('file-preview-list').innerHTML=''; document.getElementById('prompt-input').style.height='36px'; checkMediaPaymentWarning();", enctype="multipart/form-data", style="width: 100%; display: flex; justify-content: center;"
), cls="input-area"
), cls="main-content"
)
)
def render_admin_moderation_panel(utilisateur_cible):
return Div(
H3(f"⚖️ Tribunal d'administration - Dossier de : {utilisateur_cible}", style="color: #ff4444;"),
P("Loi applicable : Aucun utilisateur n'est dispensé du respect de la législation en vigueur."),
Form(
Input(type="hidden", name="cible", value=utilisateur_cible),
Div(Label("Action décidée :", style="font-weight: bold;"), Select(Option("Avertissement simple", value="Avertissement"), Option("Bannissement 1 jour", value="Ban 1J"), Option("Bannissement définitif et signalement PHAROS", value="Ban Definitif + Pharos"), name="decision", cls="input-field"), style="margin-bottom: 15px;"),
Div(Label("Commentaire (Preuve d'audit) :", style="font-weight: bold;"), Textarea(name="commentaire", rows="4", cls="input-field", placeholder="Raison..."), style="margin-bottom: 15px;"),
Button("Valider la décision et archiver", type="submit", cls="btn-submit", style="background-color: #ff4444; color: white; width: 100%;"), hx_post="/admin_decision", hx_target="#admin-result", style="background: #1a1a1a; padding: 20px; border-radius: 8px; border: 1px solid #333;"
), Div(id="admin-result", style="margin-top: 15px; color: #00e5ff;"), cls="admin-panel"
)
def render_login_page(error=None):
error_msg = P(error, style="color: #ff4444; text-align: center; font-weight: bold;") if error else ""
return Title("Connexion - Aethas38"), Body(
Div(
Img(src="/Logo/logo_aethas.svg", style="max-width: 180px; margin: 0 auto 20px; display: block;"),
H2("Accès Restreint", style="text-align: center; color: #00e5ff;"),
error_msg,
Form(
Div(Label("Email :", style="color: #aaa; font-size: 0.9em;"), Input(type="email", name="email", placeholder="admin@mail.aethas38.duckdns.org", cls="input-field", required=True), style="margin-bottom: 15px;"),
Div(Label("Mot de passe :", style="color: #aaa; font-size: 0.9em;"), Input(type="password", name="password", placeholder="••••••••", cls="input-field", required=True), style="margin-bottom: 20px;"),
Button("Déverrouiller le système", type="submit", cls="btn-submit", style="width: 100%;"), method="post", action="/login",
), style="max-width: 400px; margin: 100px auto; padding: 30px; background: #1a1a1a; border-radius: 10px; border: 1px solid #333; box-shadow: 0 4px 15px rgba(0,229,255,0.1);"
), style="background-color: #0d0d0d; color: #fff; font-family: monospace; height: 100vh; display: flex; align-items: center; justify-content: center;"
)
def render_popup_paiement(cout_estime, prompt_sauvegarde, chat_id, multi_ia_state=False, edu_state=False):
edu_val = "on" if edu_state else "off"
return Div(
Div(
H3("⚠️ Crédits insuffisants", style="color: #ff4444; margin-top: 0;"),
P("Cette requête nécessite un modèle d'IA dont le coût dépasse votre solde actuel.", style="color: #ccc;"),
P(f"Coût estimé de la requête : {cout_estime} $", style="font-size: 1.1em; font-weight: bold; color: #fff; background: #333; padding: 10px; border-radius: 5px; text-align: center;"),
Div(
Button("Annuler la requête", type="button", onclick="document.getElementById('popup-paiement').remove();", cls="btn-submit", style="background-color: #555; width: 48%; font-size: 0.85em; border-radius: 8px;"),
Form(
Input(type="hidden", name="prompt", value=prompt_sauvegarde),
Input(type="hidden", name="chat_id", value=chat_id),
Input(type="hidden", name="mode_payant", value="off"),
Input(type="hidden", name="mode_multi_ia", value="off"),
Input(type="hidden", name="mode_education", value=edu_val),
Input(type="hidden", name="validation_acquise", value="true"),
Input(type="hidden", name="choix_utilisateur", value="gratuit_force"),
Button("Tenter en Gratuit (Local)", type="submit", onclick="document.getElementById('popup-paiement').remove();", cls="btn-submit", style="background-color: #00e5ff; width: 100%; color: black; font-size: 0.85em; border-radius: 8px;"),
hx_post="/chat", hx_target="#chat-history", hx_swap="beforeend", hx_indicator="#global-loader", style="width: 48%;"
),
style="display: flex; justify-content: space-between; margin-top: 20px; gap: 10px;"
),
style="background: #1a1a1a; padding: 25px; border-radius: 12px; border: 2px solid #ff4444; width: 450px; max-width: 90vw; box-shadow: 0 10px 30px rgba(0,0,0,0.8);"
),
id="popup-paiement",
style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 9999;"
)
def render_rag_upload_modal():
themes = [
"Minecraft_KubeJS", "Juridique_Loi_Francaise", "Serveur_Debian",
"Bureautique_Excel", "Regles_Aethas38", "Education_Nationale", "Connaissances_Generales"
]
options = [Option(t.replace("_", " "), value=t, style="color: black;") for t in themes]
return Div(
Div(
H3("📚 Administration RAG (Base Vectorielle)", style="color: #2196f3; margin-top: 0;"),
P("Formats supportés : PDF, MD, TXT, JS, JSON, YML, CSV", style="color: #ccc; font-size: 0.9em;"),
Form(
Div(
Label("1. Choisir la thématique :", style="font-weight: bold; color: white;"),
Select(*options, name="theme", cls="input-field", style="margin-bottom: 15px;")
),
Div(
Label("2. Sélectionner les fichiers :", style="font-weight: bold; color: white;"),
Input(type="file", name="fichiers_rag", multiple=True, required=True, cls="input-field", style="margin-bottom: 15px; background: #222; padding: 10px; border: 1px dashed #2196f3; cursor: pointer;")
),
Div(
Button("Annuler", type="button", onclick="document.getElementById('rag-modal').remove();", cls="btn-submit", style="background-color: #555; width: 48%;"),
Button("Téléverser & Indexer", type="submit", cls="btn-submit", style="background-color: #2196f3; color: white; width: 48%;"),
style="display: flex; justify-content: space-between;"
),
hx_post="/api/upload_rag",
hx_target="#rag-upload-result",
enctype="multipart/form-data"
),
Div(id="rag-upload-result", style="margin-top: 15px; text-align: center; font-weight: bold;"),
style="background: #1a1a1a; padding: 25px; border-radius: 12px; border: 2px solid #2196f3; width: 500px; max-width: 90vw; box-shadow: 0 10px 30px rgba(0,0,0,0.8);"
),
id="rag-modal",
style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 9999;"
)
def render_backoffice_page(utilisateur, role, tous_les_utilisateurs, stats_serveur):
sections = [
H2(f"⚙️ Paramètres du compte - {utilisateur.capitalize()} ({role})", style="color: #00e5ff;"),
Form(
Div(Label("Modifier mon pseudonyme :"), Input(type="text", name="nouveau_pseudo", value=utilisateur, cls="input-field"), style="margin-bottom: 10px;"),
Div(Label("Nouveau mot de passe :"), Input(type="password", name="nouveau_mdp", placeholder="Laisser vide si inchangé", cls="input-field"), style="margin-bottom: 15px;"),
Button("Enregistrer les modifications", type="submit", cls="btn-submit"),
method="post", action="/backoffice/update_profile", style="background: #1a1a1a; padding: 20px; border-radius: 8px; border: 1px solid #333; margin-bottom: 20px;"
)
]
# Spécificités Admin & Super Admin (Héritage des privilèges inférieurs)
if role in ["Admin", "Super Admin"]:
lignes_utilisateurs = [Li(f"{pseudo} — Rôle : {data.get('role', 'Membre')}") for pseudo, data in tous_les_utilisateurs.items()]
sections.append(Div(
H3("👥 Gestion des utilisateurs", style="color: #4caf50;"),
Ul(*lignes_utilisateurs),
style="background: #1a1a1a; padding: 20px; border-radius: 8px; border: 1px solid #333; margin-bottom: 20px;"
))
# Spécificités Super Admin uniquement (Supervision Système, RAID & Agent Vectoriel + Bouton de Vectorisation Globale)
if role == "Super Admin" and stats_serveur:
data_st = stats_serveur.get('data_stats', {})
sections.append(Div(
H3("🖥️ Supervision Système, RAID & Agent Vectoriel", style="color: #ff9800;"),
P(f"💾 Espace disque racine : {stats_serveur['disque_utilise_gb']} Go / {stats_serveur['disque_total_gb']} Go ({stats_serveur['pourcentage_utilise']}%)"),
(P(f"🗄️ Partition RAID (/DATA) : {data_st.get('utilise_gb', 0)} Go / {data_st.get('total_gb', 0)} Go ({data_st.get('pourcentage', 0)}% utilisés, {data_st.get('libre_gb', 0)} Go libres)") if data_st else P("🗄️ Partition RAID (/DATA) : Non détectée")),
Div(
P("📡 État du RAID (mdstat) :", style="margin-bottom: 5px; font-weight: bold;"),
Pre(stats_serveur.get('raid_status', 'N/A'), style="font-size: 0.8em; background: #111; color: #00ffcc; padding: 10px; border-radius: 4px; overflow-x: auto; max-height: 180px; overflow-y: auto; white-space: pre-wrap; font-family: monospace; margin: 0;"),
style="margin-bottom: 15px;"
),
P(f"🤖 Agent Vectoriel (Ollama) : {stats_serveur.get('agent_status', 'N/A')}"),
Hr(style="border-color: #444; margin: 15px 0;"),
H4("⚡ Actions Globales RAG", style="color: #00e5ff; font-size: 1em;"),
Form(
Button("Forcer la vectorisation globale de tout le RAG", type="submit", cls="btn-submit", style="background-color: #e91e63; color: white; width: 100%; font-weight: bold; cursor: pointer;"),
method="post", action="/backoffice/forcer_vectorisation"
),
style="background: #1a1a1a; padding: 20px; border-radius: 8px; border: 1px solid #333; margin-bottom: 20px;"
))
# Vrai bouton ergonomique de retour au Front Office
sections.append(
A("← Retour au Chat (Front Office)", href="/", cls="btn-submit", style="display: block; text-align: center; background-color: #00e5ff; color: black; text-decoration: none; font-weight: bold; padding: 12px; border-radius: 6px;")
)
return Title("Back Office - Aethas38"), Body(
Div(*sections, style="max-width: 600px; margin: 40px auto; font-family: monospace; color: #fff; padding-bottom: 40px;"),
# Style global appliqué au Body pour forcer le défilement vertical et éliminer les blocages d'affichage
style="background-color: #0d0d0d; padding: 20px; overflow-y: auto !important; height: 100vh; box-sizing: border-box;"
)