Preview: Block ausserhalb des Formulars, Validierung und Feinschliff

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/pages/ProjectsPage.jsx

@@ -735,13 +735,6 @@ export default function ProjectsPage() {
                 </div>
               )}
 
-              {editForm.projectType !== 'project' && (
-                <div className="form-group">
-                  <label className="form-label">Preview</label>
-                  <PreviewBlock projectId={editProject.$id} />
-                </div>
-              )}
-
               <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '8px', marginTop: '16px', flexWrap: 'wrap' }}>
                 <button
                   type="button"
@@ -759,6 +752,12 @@ export default function ProjectsPage() {
                 </button>
               </div>
             </form>
+            {editForm.projectType !== 'project' && (
+              <div className="form-group" style={{ marginTop: 16 }}>
+                <label className="form-label">Preview</label>
+                <PreviewBlock key={editProject.$id} projectId={editProject.$id} />
+              </div>
+            )}
           </div>
         </div>
       )}

src/pages/ServicesPage.jsx

@@ -58,7 +58,9 @@ export default function ServicesPage() {
                         <span
                           title={`Preview: ${p.previewState}`}
                           style={{ display: 'inline-block', width: 9, height: 9, borderRadius: '50%', background: dotColor(p.previewState), marginRight: 6 }}
-                        />
+                        >
+                          <span style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', clip: 'rect(0 0 0 0)', whiteSpace: 'nowrap' }}>{`Preview: ${p.previewState}`}</span>
+                        </span>
                       )}
                       {p.projectName || p.repoFullName}
                     </div>