Make settings modal more compact and remove static sections

- Remove 'LLM Configuration Issues?' troubleshooting section
- Remove static 'Current Configuration' display in favor of input fields
- Reduce modal width from 600px to 500px
- Decrease padding, margins, and font sizes throughout
- Make ServerStatus component more compact
- Improve space efficiency while maintaining readability

Author: openhands-agent

example/src/components/ServerStatus.css

@@ -1,39 +1,39 @@
 .server-status {
   background: var(--card-bg);
   border: 1px solid var(--border-color);
-  border-radius: 8px;
-  padding: 1.5rem;
-  margin: 1rem 0;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  padding: 1rem;
+  margin: 0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .status-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 1rem;
-  padding-bottom: 0.5rem;
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.4rem;
   border-bottom: 1px solid var(--border-color);
 }
 
 .status-header h3 {
   margin: 0;
   color: var(--text-primary);
-  font-size: 1.1rem;
+  font-size: 1rem;
   font-weight: 600;
 }
 
 .status-controls {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 0.75rem;
 }
 
 .auto-refresh-toggle {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  font-size: 0.9rem;
+  gap: 0.4rem;
+  font-size: 0.8rem;
   color: var(--text-secondary);
   cursor: pointer;
   user-select: none;
@@ -66,14 +66,14 @@
 .status-items {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 0.5rem;
 }
 
 .status-item {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  padding: 0.5rem 0;
+  padding: 0.3rem 0;
   border-bottom: 1px solid var(--border-light);
 }
 
@@ -84,10 +84,11 @@
 .status-label {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.4rem;
   font-weight: 500;
   color: var(--text-primary);
-  min-width: 140px;
+  min-width: 120px;
+  font-size: 0.85rem;
 }
 
 .status-icon {
@@ -101,14 +102,15 @@
   color: var(--text-secondary);
   max-width: 60%;
   word-break: break-word;
+  font-size: 0.85rem;
 }
 
 .url-value {
   font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   background: var(--code-bg);
-  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
+  padding: 0.2rem 0.4rem;
+  border-radius: 3px;
   border: 1px solid var(--border-light);
 }
 

example/src/components/ServerStatus.tsx

@@ -167,29 +167,9 @@ export const ServerStatus: React.FC<ServerStatusProps> = ({ settings, onRefresh
         )}
       </div>
 
-      {!status?.isConnected && (
-        <div className="status-help">
-          <p>💡 <strong>Connection Issues?</strong></p>
-          <ul>
-            <li>Make sure the agent server is running</li>
-            <li>Check that the server URL is correct</li>
-            <li>Verify the agent server API key if required</li>
-            <li>Check for network connectivity issues</li>
-          </ul>
-        </div>
-      )}
-
-      {status?.isConnected && status?.llmStatus === 'error' && (
-        <div className="status-help">
-          <p>💡 <strong>LLM Configuration Issues?</strong></p>
-          <ul>
-            <li>Verify your LLM API key is correct</li>
-            <li>Check that the model name is supported</li>
-            <li>Ensure you have sufficient API credits</li>
-            <li>Check the agent server logs for more details</li>
-          </ul>
-        </div>
-      )}
+
+
+
     </div>
   );
 };

example/src/components/SettingsModal.css

@@ -13,10 +13,10 @@
 
 .modal-content {
   background: white;
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 0;
   width: 90%;
-  max-width: 600px;
+  max-width: 500px;
   max-height: 90vh;
   overflow-y: auto;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
@@ -26,14 +26,14 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 1.5rem;
+  padding: 1rem;
   border-bottom: 1px solid #e0e0e0;
 }
 
 .modal-header h2 {
   margin: 0;
   color: #333;
-  font-size: 1.5rem;
+  font-size: 1.3rem;
 }
 
 .close-button {
@@ -58,59 +58,33 @@
 }
 
 .settings-status {
-  padding: 1.5rem;
+  padding: 1rem;
   border-bottom: 1px solid #e0e0e0;
   background-color: #f8f9fa;
 }
 
-.current-settings {
-  margin-bottom: 1.5rem;
-}
-
-.current-settings h3 {
-  margin: 0 0 1rem 0;
-  color: #333;
-  font-size: 1.1rem;
-}
-
-.current-settings ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.current-settings li {
-  padding: 0.5rem 0;
-  border-bottom: 1px solid #e0e0e0;
-  font-size: 0.9rem;
-}
-
-.current-settings li:last-child {
-  border-bottom: none;
-}
-
 .settings-form {
-  padding: 1.5rem;
+  padding: 1rem;
 }
 
 .form-group {
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
 }
 
 .form-group label {
   display: block;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.3rem;
   font-weight: 600;
   color: #333;
-  font-size: 0.9rem;
+  font-size: 0.85rem;
 }
 
 .form-group input {
   width: 100%;
-  padding: 0.75rem;
+  padding: 0.6rem;
   border: 1px solid #ddd;
   border-radius: 4px;
-  font-size: 1rem;
+  font-size: 0.9rem;
   transition: border-color 0.2s, box-shadow 0.2s;
   box-sizing: border-box;
 }
@@ -129,25 +103,25 @@
 .error-message {
   display: block;
   color: #e74c3c;
-  font-size: 0.8rem;
-  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  margin-top: 0.2rem;
 }
 
 .form-actions {
   display: flex;
-  gap: 1rem;
+  gap: 0.75rem;
   justify-content: flex-end;
-  margin-top: 2rem;
-  padding-top: 1rem;
+  margin-top: 1.5rem;
+  padding-top: 0.75rem;
   border-top: 1px solid #e0e0e0;
 }
 
 .cancel-button,
 .save-button {
-  padding: 0.75rem 1.5rem;
+  padding: 0.6rem 1.2rem;
   border: none;
   border-radius: 4px;
-  font-size: 1rem;
+  font-size: 0.9rem;
   cursor: pointer;
   transition: background-color 0.2s, transform 0.1s;
 }

example/src/components/SettingsModal.tsx

@@ -105,16 +105,6 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({
         </div>
 
         <div className="settings-status">
-          <div className="current-settings">
-            <h3>Current Configuration:</h3>
-            <ul>
-              <li><strong>Agent Server URL:</strong> {initialSettings.agentServerUrl}</li>
-              <li><strong>Model:</strong> {initialSettings.modelName}</li>
-              <li><strong>LLM API Key:</strong> {initialSettings.apiKey ? '***configured***' : 'not set'}</li>
-              <li><strong>Agent Server API Key:</strong> {initialSettings.agentServerApiKey ? '***configured***' : 'not set'}</li>
-            </ul>
-          </div>
-          
           <ServerStatus settings={initialSettings} />
         </div>