fix: person bricks should center name

otherwise bricks are at the left and -50% translateY puts them
off-center, while centering long name

routes/templates/tableTemplates.gohtml

@@ -27,19 +27,6 @@
 </div>
 {{ end }}
 
-<h2>For each type</h2>
-{{ range .Bricks }}
-<div class="border-2">for {{ .Name }}</div>
-<div
-  class="border-2 p-3 flex flex-row gap-x-3"
-  style="--brick-color: var({{ .ColorClass }})"
->
-  {{ template "inactiveBrick" .ColorClass }} {{ template "raisedBrick"
-  .ColorClass }} {{ template "speakerBrick" .ColorClass }} {{ template
-  "markBrick" .ColorClass }}
-</div>
-{{ end }}
-
 <h2>Now for BrickData taking parametrized template name</h2>
 {{ define "brick" }}
 {{ if eq .TemplateType "inactiveBrick" }}
@@ -57,40 +44,44 @@
 <p>expected to be called with personData</p>
 {{ define "personBlocks" }}
 
-<div class="person-bricks" id="person-{{.Index}}" style="--i: {{ .Index }}">
+<div class="person-bricks flex flex-col items-center"
+     id="person-{{.Index}}" style="--i: {{ .Index }}">
   {{ range .BricksForPerson }} {{ template "brick" . }} {{ end }}
-  <p>{{ .Name }}({{.Index}})</p>
+  <p>{{ .Name }}</p>
 </div>
 
 {{ end }}
 
 <h2>And now i'll want to get all persons for a room</h2>
 <p>expected be called with room *roomTableData</p>
-{{ define "roomPeople" }}
-<div
-  class="circle-container relative"
-  style="--tan: {{ .Tangens }};  --m: {{ .Total }};"
->
-  {{ with .ArrowData }}
-  {{ if .IsVisible }}
-  <svg height="{{.Height}}" width="{{.Width}}"
-       class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
-       >
-    <g>
-      <path
-        d="M {{.StartX}} {{.StartY}}
-         A {{.Radius}} {{.Radius}} 0, {{.LargeArcFlag}}, 1, {{.EndX}} {{.EndY}}"
-        stroke="tomato"
-        stroke-width="2"
-        fill="transparent"
-      />
+<div class="h-4/5">
+  {{ define "roomPeople" }}
+  <div
+    class="circle-container "
+    style="--tan: {{ .Tangens }};  --m: {{ .Total }};"
+    >
+    {{ with .ArrowData }}
+    {{ if .IsVisible }}
+    <svg height="{{.Height}}" width="{{.Width}}"
+         class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+         >
+      <g>
+        <path
+          d="M {{.StartX}} {{.StartY}}
+             A {{.Radius}} {{.Radius}} 0, {{.LargeArcFlag}}, 1, {{.EndX}} {{.EndY}}"
+          stroke="tomato"
+          stroke-width="2"
+          fill="transparent"
+          />
+
+        <line x1="{{.EndX}}" y1="{{.EndY}}" x2="{{.Angle1X}}" y2="{{.Angle1Y}}" stroke="tomato" stroke-width="2" />
+        <line x1="{{.EndX}}" y1="{{.EndY}}" x2="{{.Angle2X}}" y2="{{.Angle2Y}}" stroke="tomato" stroke-width="2" />
+      </g>
+    </svg>
+    {{ end }}
+    {{ end }}
+    {{ range .Persons }} {{ template "personBlocks" . }} {{ end }}
+  </div>
+  {{end}}
 
-      <line x1="{{.EndX}}" y1="{{.EndY}}" x2="{{.Angle1X}}" y2="{{.Angle1Y}}" stroke="tomato" stroke-width="2" />
-      <line x1="{{.EndX}}" y1="{{.EndY}}" x2="{{.Angle2X}}" y2="{{.Angle2Y}}" stroke="tomato" stroke-width="2" />
-    </g>
-  </svg>
-  {{ end }}
-  {{ end }}
-  {{ range .Persons }} {{ template "personBlocks" . }} {{ end }}
 </div>
-{{end}}