Scroll table on small screen sizes
This commit is contained in:
		
							parent
							
								
									4f5b886e9e
								
							
						
					
					
						commit
						7e218dfb5d
					
				@ -1,77 +1,79 @@
 | 
				
			|||||||
<table class="mx-auto border-collapse table-auto min-w-full divide-y divide-zinc-200 dark:divide-zinc-700 text-left">
 | 
					<div class="overflow-x-auto">
 | 
				
			||||||
    <thead>
 | 
					    <table class="mx-auto border-collapse table-auto min-w-full divide-y divide-zinc-200 dark:divide-zinc-700 text-left">
 | 
				
			||||||
        <tr>
 | 
					        <thead>
 | 
				
			||||||
            <th scope="col" class="py-3 px-6 whitespace-nowrap">
 | 
					            <tr>
 | 
				
			||||||
                Host
 | 
					                <th scope="col" class="py-3 px-6 whitespace-nowrap">
 | 
				
			||||||
            </th>
 | 
					                    Host
 | 
				
			||||||
            <th scope="col" class="py-3 px-6 whitespace-nowrap">
 | 
					                </th>
 | 
				
			||||||
                Status
 | 
					                <th scope="col" class="py-3 px-6 whitespace-nowrap">
 | 
				
			||||||
            </th>
 | 
					                    Status
 | 
				
			||||||
            <th scope="col" class="py-3 px-6 whitespace-nowrap">
 | 
					                </th>
 | 
				
			||||||
                Algorithm
 | 
					                <th scope="col" class="py-3 px-6 whitespace-nowrap">
 | 
				
			||||||
            </th>
 | 
					                    Algorithm
 | 
				
			||||||
            <th scope="col" class="py-3 px-6 whitespace-nowrap">
 | 
					                </th>
 | 
				
			||||||
                Cookies
 | 
					                <th scope="col" class="py-3 px-6 whitespace-nowrap">
 | 
				
			||||||
            </th>
 | 
					                    Cookies
 | 
				
			||||||
            <th scope="col" class="py-3 px-6 whitespace-nowrap">
 | 
					                </th>
 | 
				
			||||||
                Cookie Length
 | 
					                <th scope="col" class="py-3 px-6 whitespace-nowrap">
 | 
				
			||||||
            </th>
 | 
					                    Cookie Length
 | 
				
			||||||
            <th scope="col" class="py-3 px-6 whitespace-nowrap">
 | 
					                </th>
 | 
				
			||||||
                Certificate Expiration
 | 
					                <th scope="col" class="py-3 px-6 whitespace-nowrap">
 | 
				
			||||||
            </th>
 | 
					                    Certificate Expiration
 | 
				
			||||||
            <th scope="col" class="py-3 px-6 whitespace-nowrap">
 | 
					                </th>
 | 
				
			||||||
                Last Check
 | 
					                <th scope="col" class="py-3 px-6 whitespace-nowrap">
 | 
				
			||||||
            </th>
 | 
					                    Last Check
 | 
				
			||||||
        </tr>
 | 
					                </th>
 | 
				
			||||||
    </thead>
 | 
					            </tr>
 | 
				
			||||||
    <tbody>
 | 
					        </thead>
 | 
				
			||||||
        <tr :for={server <- @servers} class="hover:bg-zinc-100 dark:hover:bg-zinc-700">
 | 
					        <tbody>
 | 
				
			||||||
            <% {status, response} = server.key_establishment_response %>
 | 
					            <tr :for={server <- @servers} class="hover:bg-zinc-100 dark:hover:bg-zinc-700">
 | 
				
			||||||
 | 
					                <% {status, response} = server.key_establishment_response %>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            <%= if (status == :ok) do %>
 | 
					                <%= if (status == :ok) do %>
 | 
				
			||||||
            <td class="py-4 px-6 whitespace-nowrap">
 | 
					                <td class="py-4 px-6 whitespace-nowrap">
 | 
				
			||||||
                <%= server.server.host %>:<%= server.server.port %>
 | 
					                    <%= server.server.host %>:<%= server.server.port %>
 | 
				
			||||||
            </td>
 | 
					                </td>
 | 
				
			||||||
            <td class="py-4 px-6 whitespace-nowrap">
 | 
					                <td class="py-4 px-6 whitespace-nowrap">
 | 
				
			||||||
                <%= status %>
 | 
					 | 
				
			||||||
            </td>
 | 
					 | 
				
			||||||
            <td class="py-4 px-6 whitespace-nowrap">
 | 
					 | 
				
			||||||
                <%= Enum.at(response.aead_algorithms, 0) %>
 | 
					 | 
				
			||||||
            </td>
 | 
					 | 
				
			||||||
            <td class="py-4 px-6 whitespace-nowrap">
 | 
					 | 
				
			||||||
                <%= length(response.cookies) %>
 | 
					 | 
				
			||||||
            </td>
 | 
					 | 
				
			||||||
            <td class="py-4 px-6 whitespace-nowrap">
 | 
					 | 
				
			||||||
                <%= response.cookie_length %>
 | 
					 | 
				
			||||||
            </td>
 | 
					 | 
				
			||||||
            <td class="py-4 px-6 whitespace-nowrap">
 | 
					 | 
				
			||||||
                <%= response.cert_expiration %>
 | 
					 | 
				
			||||||
            </td>
 | 
					 | 
				
			||||||
            <td class="py-4 px-6 whitespace-nowrap">
 | 
					 | 
				
			||||||
                <%= server.last_key_establishment %>
 | 
					 | 
				
			||||||
            </td>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
            <% else %>
 | 
					 | 
				
			||||||
            <td class="py-4 px-6 whitespace-nowrap">
 | 
					 | 
				
			||||||
                <%= server.server.host %>:<%= server.server.port %>
 | 
					 | 
				
			||||||
            </td>
 | 
					 | 
				
			||||||
            <td class="py-4 px-6 whitespace-nowrap">
 | 
					 | 
				
			||||||
                <span class="group relative">
 | 
					 | 
				
			||||||
                    <%= status %>
 | 
					                    <%= status %>
 | 
				
			||||||
                    <span class="pointer-events-none absolute -top-9 left-0 w-max p-1 rounded-lg bg-zinc-300 dark:bg-zinc-600 opacity-0 transition-opacity group-hover:opacity-100">
 | 
					                </td>
 | 
				
			||||||
                        <%= response %>
 | 
					                <td class="py-4 px-6 whitespace-nowrap">
 | 
				
			||||||
                    </span>
 | 
					                    <%= Enum.at(response.aead_algorithms, 0) %>
 | 
				
			||||||
                </span>
 | 
					                </td>
 | 
				
			||||||
            </td>
 | 
					                <td class="py-4 px-6 whitespace-nowrap">
 | 
				
			||||||
            <td class="py-4 px-6 whitespace-nowrap"> - </td>
 | 
					                    <%= length(response.cookies) %>
 | 
				
			||||||
            <td class="py-4 px-6 whitespace-nowrap"> - </td>
 | 
					                </td>
 | 
				
			||||||
            <td class="py-4 px-6 whitespace-nowrap"> - </td>
 | 
					                <td class="py-4 px-6 whitespace-nowrap">
 | 
				
			||||||
            <td class="py-4 px-6 whitespace-nowrap"> - </td>
 | 
					                    <%= response.cookie_length %>
 | 
				
			||||||
 | 
					                </td>
 | 
				
			||||||
 | 
					                <td class="py-4 px-6 whitespace-nowrap">
 | 
				
			||||||
 | 
					                    <%= response.cert_expiration %>
 | 
				
			||||||
 | 
					                </td>
 | 
				
			||||||
 | 
					                <td class="py-4 px-6 whitespace-nowrap">
 | 
				
			||||||
 | 
					                    <%= server.last_key_establishment %>
 | 
				
			||||||
 | 
					                </td>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            <td class="py-4 px-6 whitespace-nowrap">
 | 
					                <% else %>
 | 
				
			||||||
                <%= server.last_key_establishment %>
 | 
					                <td class="py-4 px-6 whitespace-nowrap">
 | 
				
			||||||
            </td>
 | 
					                    <%= server.server.host %>:<%= server.server.port %>
 | 
				
			||||||
            <% end %>
 | 
					                </td>
 | 
				
			||||||
        </tr>
 | 
					                <td class="py-4 px-6 whitespace-nowrap">
 | 
				
			||||||
    </tbody>
 | 
					                    <span class="group relative">
 | 
				
			||||||
</table>
 | 
					                        <%= status %>
 | 
				
			||||||
 | 
					                        <span class="pointer-events-none absolute -top-9 left-0 w-max p-1 rounded-lg bg-zinc-300 dark:bg-zinc-600 opacity-0 transition-opacity group-hover:opacity-100">
 | 
				
			||||||
 | 
					                            <%= response %>
 | 
				
			||||||
 | 
					                        </span>
 | 
				
			||||||
 | 
					                    </span>
 | 
				
			||||||
 | 
					                </td>
 | 
				
			||||||
 | 
					                <td class="py-4 px-6 whitespace-nowrap"> - </td>
 | 
				
			||||||
 | 
					                <td class="py-4 px-6 whitespace-nowrap"> - </td>
 | 
				
			||||||
 | 
					                <td class="py-4 px-6 whitespace-nowrap"> - </td>
 | 
				
			||||||
 | 
					                <td class="py-4 px-6 whitespace-nowrap"> - </td>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                <td class="py-4 px-6 whitespace-nowrap">
 | 
				
			||||||
 | 
					                    <%= server.last_key_establishment %>
 | 
				
			||||||
 | 
					                </td>
 | 
				
			||||||
 | 
					                <% end %>
 | 
				
			||||||
 | 
					            </tr>
 | 
				
			||||||
 | 
					        </tbody>
 | 
				
			||||||
 | 
					    </table>
 | 
				
			||||||
 | 
					</div>
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
		Reference in New Issue
	
	Block a user