[settings] Clean up settings widget

vrobbler/templates/profiles/settings_form.html

@@ -5,54 +5,92 @@
 
 {% block head_extra %}
 <style>
-.container {
-    max-width: 500px;
-    float:left;
+.settings-form {
+    display: grid;
+    grid-template-columns: 180px 1fr;
+    gap: 12px 16px;
+    align-items: center;
+    max-width: 700px;
 }
 
-p {
-    margin-bottom: 15px;
+.settings-form p {
+    margin: 0;
+    display: contents;
 }
 
-label {
-    display: block;
-    font-weight: bold;
-    margin-bottom: 5px;
+.settings-form label {
+    font-weight: 600;
+    text-align: right;
+    padding-right: 12px;
 }
 
-input[type="text"] {
+.settings-form input[type="text"],
+.settings-form input[type="password"] {
     width: 100%;
-    padding: 8px;
+    padding: 6px 10px;
     border: 1px solid #ccc;
     border-radius: 4px;
     font-size: 14px;
 }
 
-input[type="checkbox"] {
-    margin-left: 5px;
-    transform: scale(1.2);
-}
-
-input:focus {
+.settings-form input:focus {
     outline: none;
     border-color: #007bff;
     box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
 }
 
+.settings-form .checkbox-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.settings-form .checkbox-row label {
+    font-weight: normal;
+    text-align: left;
+}
+
+.settings-form input[type="checkbox"] {
+    transform: scale(1.1);
+}
+
+.settings-form input[type="submit"] {
+    grid-column: 1 / -1;
+    margin-top: 16px;
+    padding: 10px 24px;
+    background: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.settings-form input[type="submit"]:hover {
+    background: #0056b3;
+}
+
 .widget-links {
-    margin: 10px 0 20px 20px;
-    padding: 10px;
+    grid-column: 2;
+    margin: 8px 0 16px 0;
+    padding: 12px;
     background: #f8f9fa;
     border-radius: 4px;
+    font-size: 13px;
+}
+
+.widget-links strong {
+    display: block;
+    margin-bottom: 8px;
 }
 
 .widget-links ul {
-    margin: 5px 0 0 0;
-    padding-left: 20px;
+    margin: 0;
+    padding-left: 18px;
 }
 
 .widget-links li {
-    margin-bottom: 5px;
+    margin-bottom: 4px;
 }
 </style>
 
@@ -62,19 +100,16 @@ input:focus {
 
 {% block title %}Settings{% endblock %}
 {% block details %}
-<form method="post">{% csrf_token %}
+<form method="post" class="settings-form">{% csrf_token %}
     {% for field in form %}
         {% if field.name == "enable_public_widgets" %}
-            <p>
+            <p class="checkbox-row">
                 {{ field }}
                 {{ field.label_tag }}
-                {% if field.errors %}
-                    <span class="error">{{ field.errors }}</span>
-                {% endif %}
             </p>
             {% if user_id %}
             <div class="widget-links">
-                <p><strong>Available Widgets:</strong></p>
+                <strong>Available Widgets:</strong>
                 <ul>
                     <li><a href="{% url 'scrobbles:embeddable-top-artists' user_id %}">Top Artists</a></li>
                     <li><a href="{% url 'scrobbles:embeddable-top-board-games-week' user_id %}">Top Board Games (Week)</a></li>
@@ -87,9 +122,6 @@ input:focus {
             <p>
                 {{ field.label_tag }}
                 {{ field }}
-                {% if field.errors %}
-                    <span class="error">{{ field.errors }}</span>
-                {% endif %}
             </p>
         {% endif %}
     {% endfor %}