Skip to content

Compact the chatbot on mobile #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
codoom1 merged 1 commit into from
Jul 25, 2026
Merged

Compact the chatbot on mobile #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 66 additions & 2 deletions public/static/css/chatbot.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@
}

/* Responsive styles */
@media (max-width: 768px) {
@media (max-width: 768px) {
#chat-window {
right: 16px;
bottom: 140px;
Expand All @@ -216,5 +216,69 @@
.chat-icon-container {
right: 16px;
bottom: 78px;
}
}
}

@media (max-width: 576px) {
#chat-window {
right: 16px;
bottom: calc(128px + env(safe-area-inset-bottom, 0px));
width: min(330px, calc(100vw - 48px));
height: min(440px, 62dvh);
border-radius: 14px;
}

.chat-icon-container {
right: 16px;
bottom: calc(70px + env(safe-area-inset-bottom, 0px));
}

#chat-icon {
width: 46px;
height: 46px;
}

#chat-icon i {
font-size: 21px;
}

.chat-header {
padding: 11px 12px;
}

.chat-header h3 {
font-size: 15px;
}

#chat-messages {
padding: 10px;
gap: 8px;
}

.message {
margin-bottom: 6px;
}

.message-bubble {
max-width: 88%;
padding: 8px 10px;
font-size: 13px;
}

.chat-input {
padding: 10px;
}

#user-message {
min-width: 0;
padding: 8px 11px;
font-size: 13px;
}

#send-message {
width: 36px;
height: 36px;
margin-left: 8px;
flex: 0 0 36px;
}
}
4 changes: 2 additions & 2 deletions templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/app.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/chatbot.css', v='20260725.1') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/chatbot.css', v='20260725.2') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/page_search.css') }}">
{% block extra_css %}{% endblock %}
</head>
Expand Down Expand Up @@ -184,7 +184,7 @@ <h3><i class="bi bi-robot me-2"></i>Statistical assistant</h3>
</button>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="{{ url_for('static', filename='js/chatbot.js', v='20260725.1') }}"></script>
<script src="{{ url_for('static', filename='js/chatbot.js', v='20260725.2') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (element) {
Expand Down
4 changes: 2 additions & 2 deletions templates/blank.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

<!-- Chatbot CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/chatbot.css', v='20260725.1') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/chatbot.css', v='20260725.2') }}">

<!-- Page Search CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/page_search.css') }}">
Expand Down Expand Up @@ -92,7 +92,7 @@ <h3><i class="bi bi-robot me-2"></i>AI Assistant</h3>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- Chatbot JS -->
<script src="{{ url_for('static', filename='js/chatbot.js', v='20260725.1') }}"></script>
<script src="{{ url_for('static', filename='js/chatbot.js', v='20260725.2') }}"></script>

<!-- Page Search JS -->
<script src="{{ url_for('static', filename='js/page_search.js') }}"></script>
Expand Down
4 changes: 2 additions & 2 deletions tests/test_main_routes.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ def test_home_page(self, client):
response = client.get('/')
assert response.status_code == 200
assert b'statistical' in response.data.lower() or b'model' in response.data.lower()
assert b'chatbot.js?v=20260725.1' in response.data
assert b'chatbot.css?v=20260725.1' in response.data
assert b'chatbot.js?v=20260725.2' in response.data
assert b'chatbot.css?v=20260725.2' in response.data
def test_analysis_form_page(self, client):
"""Test that the analysis form page loads."""
response = client.get('/analysis-form')
Expand Down