add gitignore

.gitignore

@@ -0,0 +1 @@
+node_modules/ 

flake.nix

@@ -36,6 +36,10 @@
           cp -r ${./templates} $out/share/fragify/
           # Provide a WSGI entry file for uWSGI to load
           install -Dm644 ${./fragify.py} $out/share/fragify/fragify_wsgi.py
+          # Install built assets if present
+          if [ -d ./assets ]; then
+            cp -r ./assets $out/share/fragify/
+          fi
         '';
 
         meta.mainProgram = "fragify";

fragify.py

@@ -55,6 +55,16 @@ class BaseTemplateResource:
 		# Fallback to current directory
 		return dev_template_dir
 
+class StaticResource:
+	def __init__(self, directory: str):
+		self._directory = directory
+		self._static = falcon.asgi.StaticRoute(directory)
+
+	def on_get(self, req, resp, path):
+		# Serve static files via falcon's static route helper
+		static_app = falcon.asgi.StaticRoute(self._directory)
+		return static_app(req, resp)
+
 class FragifyApp(BaseTemplateResource):
 	def __init__(self):
 		self.fragdenstaat_api = "https://fragdenstaat.de/api/v1"
@@ -168,6 +178,18 @@ class PublicBodiesResource:
 # Create Falcon application
 app = falcon.App()
 
+# Discover static assets directory
+STATIC_DIR = os.environ.get('FRAGIFY_STATIC_DIR')
+if not STATIC_DIR:
+	# Prefer local assets folder in development
+	script_dir = os.path.dirname(os.path.abspath(__file__))
+	candidate = os.path.join(script_dir, 'assets')
+	if os.path.isdir(candidate):
+		STATIC_DIR = candidate
+	else:
+		# Fallback to packaged location under share
+		STATIC_DIR = os.path.join(script_dir, '..', 'share', 'fragify', 'assets')
+
 # Add routes
 fragify = FragifyApp()
 impressum = ImpressumResource()
@@ -179,11 +201,16 @@ app.add_route('/impressum', impressum)
 app.add_route('/datenschutz', datenschutz)
 app.add_route('/api/publicbodies', publicbodies)
 
+# Static file route
+if STATIC_DIR and os.path.isdir(STATIC_DIR):
+	app.add_static_route('/static', STATIC_DIR)
+
 if __name__ == '__main__':
 	import wsgiref.simple_server
 	
 	print("Starting Fragify web application...")
 	print("Open your browser and navigate to: http://localhost:8000")
+	print(f"Serving static assets from: {STATIC_DIR}")
 	
 	httpd = wsgiref.simple_server.make_server('localhost', 8000, app)
 	httpd.serve_forever()

templates/base.html

@@ -4,9 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}Fragify{% endblock %}</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet">
+    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
+    <link href="/static/css/select2.min.css" rel="stylesheet">
+    <link href="/static/css/select2-bootstrap-5-theme.min.css" rel="stylesheet">
     <style>
         body {
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
@@ -63,6 +63,34 @@
             margin-top: 1rem;
             word-break: break-all;
         }
+        /* Ensure Select2 scales properly */
+        .select2-container {
+            width: 100% !important;
+        }
+        .select2-container .select2-selection--single {
+            height: auto;
+            min-height: 2.75rem;
+        }
+        .select2-container .select2-selection__rendered {
+            white-space: normal;
+            line-height: 1.4 !important;
+        }
+        .select2-container .select2-selection__arrow {
+            height: 100% !important;
+        }
+        /* Mobile adjustments */
+        @media (max-width: 576px) {
+            .main-container {
+                padding: 1.25rem;
+                margin: 1rem auto 4rem auto;
+            }
+            .title {
+                font-size: 2rem;
+            }
+            .description {
+                font-size: 1rem;
+            }
+        }
         .loading {
             display: none;
         }
@@ -139,9 +167,9 @@
         </footer>
     </div>
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
+    <script src="/static/js/bootstrap.bundle.min.js"></script>
+    <script src="/static/js/jquery.min.js"></script>
+    <script src="/static/js/select2.min.js"></script>
     
     {% block extra_js %}{% endblock %}
 </body>

templates/index.html

@@ -57,6 +57,7 @@
             theme: 'bootstrap-5',
             placeholder: 'Behörde auswählen...',
             allowClear: true,
+            width: '100%',
             ajax: {
                 url: '/api/publicbodies',
                 dataType: 'json',