fix: person bricks should center name

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

routes/room_page_templates_preview.go

@@ -215,15 +215,15 @@ func roomTemplatesPreview(
 
 		var person1 = rooms.Person{
 			Id:   rooms.PersonId(100),
-			Name: "test person 1",
+			Name: "test person name 1",
 		}
 		var person2 = rooms.Person{
 			Id:   rooms.PersonId(200),
-			Name: "test person 2",
+			Name: "test person name 2",
 		}
 		var person3 = rooms.Person{
 			Id:   rooms.PersonId(300),
-			Name: "test person 3",
+			Name: "test person name 3",
 		}
 		aRoom := rooms.Room{
 			Name:           "test",

routes/static/out.css

@@ -538,10 +538,6 @@ video {
   position: absolute;
 }
 
-.relative {
-  position: relative;
-}
-
 .left-1\/2 {
   left: 50%;
 }
@@ -570,6 +566,10 @@ video {
   height: 3.5rem;
 }
 
+.h-4\/5 {
+  height: 80%;
+}
+
 .h-\[var\(--brick-height\)\] {
   height: var(--brick-height);
 }
@@ -636,10 +636,6 @@ video {
   grid-template-rows: auto 1fr;
 }
 
-.flex-row {
-  flex-direction: row;
-}
-
 .flex-col {
   flex-direction: column;
 }
@@ -648,6 +644,10 @@ video {
   place-content: center;
 }
 
+.items-center {
+  align-items: center;
+}
+
 .gap-4 {
   gap: 1rem;
 }
@@ -656,11 +656,6 @@ video {
   gap: 1.5rem;
 }
 
-.gap-x-3 {
-  -moz-column-gap: 0.75rem;
-       column-gap: 0.75rem;
-}
-
 .rounded {
   border-radius: 0.25rem;
 }
@@ -731,6 +726,10 @@ video {
   background-color: rgb(254 240 138 / var(--tw-bg-opacity));
 }
 
+.p-10 {
+  padding: 2.5rem;
+}
+
 .p-3 {
   padding: 0.75rem;
 }

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,20 +44,22 @@
 <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"
+<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}}"
@@ -92,5 +81,7 @@
     {{ end }}
     {{ end }}
     {{ range .Persons }} {{ template "personBlocks" . }} {{ end }}
+  </div>
+  {{end}}
+
 </div>
-{{end}}

routes/templates/tableTemplatesPreview.gohtml

@@ -1,4 +1,5 @@
 {{define "main-content"}}
+<div style="--d: 10rem">
 
 <h2>For each type</h2>
 <section class="grid grid-cols-5 border-4 gap-4">
@@ -27,8 +28,10 @@
 
 
 <h2>And now i'll want to get all persons for a room</h2>
-<div class="grid place-content-center">
+<div class="grid place-content-center p-10">
   {{ template "roomPeople" .ARoom }}
 </div>
 
 {{end}}
+
+</div>