Make table more responsiveness on mobile

Author: linkdotnet

LinkDotNet.Blog.IntegrationTests/Web/Shared/Skills/SkillTreeTests.cs renamed to LinkDotNet.Blog.IntegrationTests/Web/Shared/Skills/SkillTableTests.cs

@@ -14,7 +14,7 @@
 
 namespace LinkDotNet.Blog.IntegrationTests.Web.Shared.Skills
 {
-    public class SkillTreeTests : SqlDatabaseTestBase<Skill>
+    public class SkillTableTests : SqlDatabaseTestBase<Skill>
     {
         [Fact]
         public async Task ShouldDeleteItem()

LinkDotNet.Blog.Web/Shared/Skills/SkillTable.razor

@@ -10,7 +10,7 @@
             <AddSkillDialog @ref="AddSkillDialog" SkillAdded="@AddSkill"></AddSkillDialog>
         }
     </div>
-<div>
+<div class="table-container">
     <table class="skill-table">
         <tbody>
         <tr>

LinkDotNet.Blog.Web/Shared/Skills/SkillTable.razor.css

@@ -1,3 +1,7 @@
+.table-container {
+    overflow-x: auto;
+}
+
 .skill-table {
     margin-top: 20px;
     width: 100%;
@@ -11,12 +15,12 @@
     width: 30%;
     border-top: 1px var(--header2) solid;
     vertical-align: top;
+    min-width: 100px;
 }
 
 .skill-table td div {
     display: inline-block;
     margin-right: 8px;
     margin-top: 12px;
     margin-bottom: 12px;
-
 }