Make table to wrap words from all content by words (#2042)

* Make table to wrap words from all content by words

* media support for small screen on Lang filter

_includes/releases/nav.md

@@ -1 +1,10 @@
-[.NET](#net) | [Java](#java) | [JavaScript/TypeScript](#javascript) | [Python](#python) | [C++](#c) | [Embedded C](#embedded-c) | [Android](#android) |[iOS](#ios) |
+<div class="nav-language-filter">
+  <div class="nav-language-filter-cell"><a href="#net">.NET</a></div>
+  <div class="nav-language-filter-cell"><a href="#java">Java</a></div>
+  <div class="nav-language-filter-cell"><a href="#javascript">JavaScript/TypeScript</a></div>
+  <div class="nav-language-filter-cell"><a href="#python">Python</a></div>
+  <div class="nav-language-filter-cell"><a href="#c">C++</a></div>
+  <div class="nav-language-filter-cell"><a href="#embedded-c">Embedded C</a></div>
+  <div class="nav-language-filter-cell"><a href="#android">Android</a></div>
+  <div class="nav-language-filter-cell"><a href="#ios">iOS</a></div>
+</div>

_includes/releases/pkgrow.md

@@ -1,6 +1,6 @@
 {% if item.Hide != "true" %}
 <tr>
-  <td>{{ item.DisplayName }}</td>
+  <td class="table-display-text-th">{{ item.DisplayName }}</td>
   <td>
     {% assign trimmedPackage = item.Package | remove: package_trim %}
 
@@ -67,6 +67,6 @@
         {% include releases/pkgbadge.md label="github" preview="true" url=url version=item.VersionPreview %}
     {% endif %}
   </td>
-  <td>{{ item.Notes }}</td>
+  <td class="table-display-text-th">{{ item.Notes }}</td>
 </tr>
 {% endif %}

_includes/releases/pkgtable.md

@@ -1,11 +1,11 @@
 <table>
 <tr>
-  <th>Display Name</th>
+  <th class="table-display-text-th table-display-name-th">Display Name</th>
   <th>Package</th>
   <th>Microsoft Docs</th>
   <th>GitHub Docs</th>
   <th>Source</th>
-  <th>Notes</th>
+  <th class="table-display-text-th">Notes</th>
 </tr>
 <tbody id="myTable">
 {% for item in packages %}

css/customstyles.css

@@ -160,6 +160,8 @@ table {
   max-width: 100%;
   margin-bottom: 20px;
   border: 1px solid #dedede;
+  width: 100%;
+  word-break: break-word;
 }
 
 table > thead > tr > th,
@@ -168,7 +170,7 @@ table > tfoot > tr > th,
 table > thead > tr > td,
 table > tbody > tr > td,
 table > tfoot > tr > td {
-  padding: 8px;
+  padding: 7px 0px 7px 0px;
   line-height: 1.42857143;
   vertical-align: top;
   border-top: 1px solid #ddd;
@@ -1343,3 +1345,32 @@ h4.panel-title {
 .badge-preview {
   margin-left: 0px;
 }
+
+.table-display-name-th {
+  width: 18rem;
+}
+
+.table-display-text-th {
+  padding: 7px;
+}
+
+.nav-language-filter {
+  background-color: #F9F9F9;
+  border: 1px solid #dedede;
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.nav-language-filter-cell {
+  align-items: center;
+  display: flex;
+  flex:1;
+  justify-content: center;
+  padding: 7px 0 7px 0;
+}
+
+@media (max-width: 600px) {
+  .nav-language-filter {
+    flex-direction: column;
+  }
+}