fixed table styles

member_group_size_calc/templates/member_group_size_calc/index.html

@@ -41,43 +41,44 @@
             </div>
         </div>
 
-        <div class="text-lg mb-4">
+        <div class="flex gap-3 text-lg mb-4 flex-col items-center md:flex-row">
             Počet členů sdružení či orgánu:
             <input
                 id="member-count"
                 class="w-[7ch]"
                 type="number"
                 value="0"
-            ><button
+            >
+            <button
                 id="calculate"
-                class="ml-3 px-4 py-2 bg-black text-white duration-100 font-bebas hover:bg-white hover:text-black"
+                class="px-4 py-2 bg-black text-white duration-100 font-bebas hover:bg-white hover:text-black"
             >OK</button>
         </div>
 
-        <div class="mb-4 flex gap-3 items-start">
+        <div class="mb-4 flex gap-3 items-center flex-col-reverse md:items-start md:flex-row">
             <table class="inline-block table-auto">
                 <thead>
                     <tr>
                         <th
-                            class="px-3 py-2 bg-black text-white text-center text-xl font-bebas border border-black"
+                            class="px-5 py-2 bg-black text-white text-center text-xl border border-black"
                             colspan="2"
                         >Počty členů</th>
                     </tr>
                 </thead>
-                <tbody>
-                    <tr class="border border-black">
-                        <th class="font-bold text-left px-4 py-2">Setina</th>
+                <tbody class="border-x border-b border-gray-100">
+                    <tr>
+                        <th class="font-bold text-left px-4 py-2 border-r border-r-gray-100">Setina</th>
                         <th class="font-normal px-4 py-2" id="hundredth">0</th>
                     </tr>
-                    <tr class="border border-black">
+                    <tr class="bg-gray-100">
                         <th class="font-bold text-left px-4 py-2">Desetina</th>
                         <th class="font-normal px-4 py-2" id="tenth">0</th>
                     </tr>
-                    <tr class="border border-black">
-                        <th class="font-bold text-left px-4 py-2">Pětina</th>
+                    <tr>
+                        <th class="font-bold text-left px-4 py-2 border-r border-r-gray-100">Pětina</th>
                         <th class="font-normal px-4 py-2" id="fifth">0</th>
                     </tr>
-                    <tr class="border border-black">
+                    <tr class="bg-gray-100">
                         <th class="font-bold text-left px-4 py-2">2x odmocnina</th>
                         <th class="font-normal px-4 py-2" id="two-square-roots">0</th>
                     </tr>
@@ -88,22 +89,22 @@
                 <thead>
                     <tr>
                         <th
-                            class="px-3 py-2 bg-black text-white text-center text-xl font-bebas border border-black"
+                            class="px-5 py-2 bg-black text-white text-center text-xl border border-black"
                             colspan="2"
                         >Hodnoty podle jednacího řádu</th>
                     </tr>
                 </thead>
-                <tbody>
-                    <tr class="border border-black">
-                        <th class="font-bold text-left px-4 py-2">Rozeslání členského podnětu</th>
+                <tbody class="border-x border-b border-gray-100">
+                    <tr>
+                        <th class="font-bold text-left px-4 py-2 border-r border-r-gray-100">Rozeslání členského podnětu</th>
                         <th class="font-normal px-4 py-2" id="member-motion">0</th>
                     </tr>
-                    <tr class="border border-black">
+                    <tr class="bg-gray-100">
                         <th class="font-bold text-left px-4 py-2">Zařazení na běžící jednání</th>
                         <th class="font-normal px-4 py-2" id="ongoing-motion">0</th>
                     </tr>
-                    <tr class="border border-black">
-                        <th class="font-bold text-left px-4 py-2">Svolání jednání</th>
+                    <tr>
+                        <th class="font-bold text-left px-4 py-2 border-r border-r-gray-100">Svolání jednání</th>
                         <th class="font-normal px-4 py-2" id="motion-start">0</th>
                     </tr>
                 </tbody>

shared/static/shared/style.css

@@ -533,10 +533,6 @@ html {
   margin-bottom: 0.75rem;
 }
 
-.ml-3 {
-  margin-left: 0.75rem;
-}
-
 .block {
   display: block;
 }
@@ -565,6 +561,14 @@ html {
   flex-direction: row;
 }
 
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-col-reverse {
+  flex-direction: column-reverse;
+}
+
 .items-start {
   align-items: flex-start;
 }
@@ -585,11 +589,34 @@ html {
   border-width: 1px;
 }
 
+.border-x {
+  border-left-width: 1px;
+  border-right-width: 1px;
+}
+
+.border-b {
+  border-bottom-width: 1px;
+}
+
+.border-r {
+  border-right-width: 1px;
+}
+
 .border-black {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
 
+.border-gray-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity));
+}
+
+.border-r-gray-100 {
+  --tw-border-opacity: 1;
+  border-right-color: rgb(243 244 246 / var(--tw-border-opacity));
+}
+
 .bg-amber-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 243 199 / var(--tw-bg-opacity));
@@ -623,9 +650,9 @@ html {
   padding-bottom: 0.5rem;
 }
 
-.px-3 {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
 }
 
 .text-left {
@@ -725,6 +752,14 @@ html {
   .md\:w-full {
     width: 100%;
   }
+
+  .md\:flex-row {
+    flex-direction: row;
+  }
+
+  .md\:items-start {
+    align-items: flex-start;
+  }
 }
 
 @media (min-width: 1024px) {