improve profile

packages/frontend/src/components/EditableField.css

@@ -0,0 +1,86 @@
+/* packages/frontend/src/components/EditableField.css */
+
+.editable-field-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  position: relative;
+}
+
+.editable-field-container label {
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: var(--pico-secondary);
+}
+
+/* Modalità visualizzazione */
+.display-mode {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 40px; /* Stessa altezza dell'input */
+  padding: 0.375rem 0.75rem;
+  border: 1px solid transparent; /* Per mantenere l'allineamento */
+  border-radius: var(--border-radius);
+  transition: background-color 0.2s ease-in-out;
+}
+
+.display-mode:hover {
+    background-color: var(--pico-muted-background-color);
+}
+
+.display-mode .display-value {
+  flex-grow: 1;
+  word-break: break-word;
+}
+
+.display-mode em {
+  color: var(--pico-secondary);
+  font-style: normal;
+}
+
+.display-mode .button-icon {
+  visibility: hidden; /* Nascosto di default */
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  margin-left: 0.5rem;
+}
+
+.display-mode:hover .button-icon {
+  visibility: visible; /* Visibile solo in hover */
+  opacity: 1;
+}
+
+/* Modalità modifica */
+.edit-mode {
+  display: flex;
+  flex-direction: column;
+}
+
+.edit-mode input,
+.edit-mode select,
+.edit-mode textarea {
+  width: 100%;
+}
+
+.edit-actions {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+    justify-content: flex-start;
+}
+
+/* Pulsanti piccoli per le azioni */
+.button-icon {
+    padding: 0.3rem 0.5rem;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.error-text {
+    color: var(--pico-color-red-500);
+    font-size: 0.8rem;
+    margin-top: 0.25rem;
+}