proper form

src/client/components/form.rs

@@ -34,11 +34,27 @@ pub fn render_form(
         vertical: 1,
     });
 
-    // Split into label column and input column
+    // Create a vertical layout for the entire form content
+    let main_layout = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints([
+            Constraint::Length(1), // For count and ID
+            Constraint::Min(1),    // For form fields
+        ])
+        .split(inner_area);
+
+    // Render the count and ID at the very top
+    let count_id_text = format!("Total: {} | Current: {}", total_count, current_id);
+    let count_id_paragraph = Paragraph::new(count_id_text)
+        .style(Style::default().fg(theme.fg))
+        .alignment(Alignment::Left);
+    f.render_widget(count_id_paragraph, main_layout[0]);
+
+    // Split the remaining space into label and input columns
     let columns = Layout::default()
         .direction(Direction::Horizontal)
         .constraints([Constraint::Percentage(30), Constraint::Percentage(70)])
-        .split(inner_area);
+        .split(main_layout[1]);
 
     // Create compact input container
     let input_container = Block::default()
@@ -63,28 +79,11 @@ pub fn render_form(
     // Input area inside borders
     let input_area = input_container.inner(input_container_area);
 
-    // Add a new layout for the count and ID display
-    let count_id_layout = Layout::default()
-        .direction(Direction::Vertical)
-        .constraints([
-            Constraint::Length(1), // For count and ID
-            Constraint::Min(1),     // For the rest of the form
-        ])
-        .split(input_area);
-
-    // Render the count and ID
-    let count_id_text = format!("Total: {} | Current ID: {}", total_count, current_id);
-    let count_id_paragraph = Paragraph::new(count_id_text)
-        .style(Style::default().fg(theme.fg))
-        .alignment(Alignment::Left);
-
-    f.render_widget(count_id_paragraph, count_id_layout[0]);
-
     // Split the remaining area for the form inputs
     let input_rows = Layout::default()
         .direction(Direction::Vertical)
         .constraints(vec![Constraint::Length(1); fields.len()])
-        .split(count_id_layout[1]);
+        .split(input_area);
 
     // Render labels close to the border
     for (i, field) in fields.iter().enumerate() {