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,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}}

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>