Polish export and system mobile layout

frontend/src/components/providers/ProviderPanel.tsx

@@ -14,25 +14,54 @@ export function ProviderPanel({
   onRefresh,
 }: ProviderPanelProps): JSX.Element {
   return (
-    <section>
-      <h2>Provider Capabilities</h2>
-      <button type="button" onClick={onRefresh} disabled={loadingCapabilities}>
-        Refresh providers
-      </button>
+    <section className="system-provider-panel">
+      <div className="panel-title-row">
+        <div>
+          <h2>Provider Capabilities</h2>
+          <p className="muted">Review configured local providers and honest not-configured external sources.</p>
+        </div>
+        <button type="button" className="secondary-action" onClick={onRefresh} disabled={loadingCapabilities}>
+          Refresh providers
+        </button>
+      </div>
       {loadingCapabilities ? <p>Loading provider capabilities...</p> : null}
       {capabilitiesError ? <p className="error">{capabilitiesError}</p> : null}
       {providers.length === 0 && !loadingCapabilities ? <p>No providers reported by backend</p> : null}
-      <ul>
+      <ul className="system-provider-list">
         {providers.map((provider) => (
-          <li key={provider.provider_name}>
-            <strong>{provider.display_name}</strong>
-            <div>provider: {provider.provider_name}</div>
-            <div>authority: {provider.authority_level}</div>
-            <div>status: {provider.status}</div>
-            <div>configured: {provider.configured ? 'yes' : 'no'}</div>
-            <div>layers: {provider.supported_layers.join(', ')}</div>
-            <div>geometry: {provider.supported_geometry_types.join(', ')}</div>
-            <div>query modes: {provider.supported_query_modes.join(', ')}</div>
+          <li className="system-provider-card" key={provider.provider_name}>
+            <div className="system-provider-header">
+              <div>
+                <strong>{provider.display_name}</strong>
+                <span>{provider.provider_name}</span>
+              </div>
+              <span className={provider.configured ? 'status-badge status-badge-ready' : 'status-badge'}>{provider.status}</span>
+            </div>
+            <div className="system-provider-grid">
+              <div>
+                <span>Authority</span>
+                <strong>{provider.authority_level}</strong>
+              </div>
+              <div>
+                <span>Configured</span>
+                <strong>{provider.configured ? 'yes' : 'no'}</strong>
+              </div>
+              <div>
+                <span>Geometry</span>
+                <strong>{provider.supported_geometry_types.join(', ')}</strong>
+              </div>
+              <div>
+                <span>Query modes</span>
+                <strong>{provider.supported_query_modes.join(', ')}</strong>
+              </div>
+            </div>
+            <div className="provider-layer-list" aria-label={`${provider.provider_name} supported layers`}>
+              {provider.supported_layers.map((layer) => (
+                <span className="provider-layer-chip" key={layer}>
+                  {layer}
+                </span>
+              ))}
+            </div>
             <div>limitation: {provider.limitation_message}</div>
             <div>attribution: {provider.attribution}</div>
             <div>license: {provider.license_note}</div>