Enable scrollbar on cert table only. (#8340)

NuGet · Dec 2, 2020 · a70b396 · a70b396
1 parent 3ca24ec
commit a70b396
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 28 deletions.
diff --git a/src/Bootstrap/dist/css/bootstrap-theme.css b/src/Bootstrap/dist/css/bootstrap-theme.css
diff --git a/src/Bootstrap/less/theme/base.less b/src/Bootstrap/less/theme/base.less
@@ -320,6 +320,10 @@ img.reserved-indicator-icon {
   margin-right: auto;
 }
 
+.table-container {
+  overflow-x: auto;
+}
+
 .package-list {
   margin-top: 8px;
   margin-bottom: 8px;

diff --git a/src/NuGetGallery/Views/Shared/_AccountCertificates.cshtml b/src/NuGetGallery/Views/Shared/_AccountCertificates.cshtml
@@ -78,37 +78,38 @@
 
             <div data-bind="if: $data && $data.hasCertificates && $data.hasCertificates()">
                 <div class="panel-collapse collapse in" aria-expanded="true">
-                    <table class="table" role="list">
-                        <thead>
-                            <tr class="manage-certificate-headings">
-                                <th>Fingerprint (SHA-256)</th>
-                                <th>Subject</th>
-                                <th>Expiration</th>
-                                <th>Issuer</th>
-                                <th><span class="hidden">Icon</span></th>
-                            </tr>
-                        </thead>
-                        <tbody data-bind="foreach: $data.certificates">
-                            <tr class="manage-certificate-listing" role="listitem">
-                                <td><samp class="small-fingerprint break-word" data-bind="text: Thumbprint"></samp></td>
-                                <td data-bind="text: ShortSubject, attr: { title: Subject }"></td>
-                                <td data-bind="text: ExpirationDisplay, attr: {
+                    <div class="table-container">
+                        <table class="table" role="list">
+                            <thead>
+                                <tr class="manage-certificate-headings">
+                                    <th>Fingerprint (SHA-256)</th>
+                                    <th>Subject</th>
+                                    <th>Expiration</th>
+                                    <th>Issuer</th>
+                                    <th><span class="hidden">Icon</span></th>
+                                </tr>
+                            </thead>
+                            <tbody data-bind="foreach: $data.certificates">
+                                <tr class="manage-certificate-listing" role="listitem">
+                                    <td><samp class="small-fingerprint break-word" data-bind="text: Thumbprint"></samp></td>
+                                    <td data-bind="text: ShortSubject, attr: { title: Subject }"></td>
+                                    <td data-bind="text: ExpirationDisplay, attr: {
                                     title: IsExpired ? 'This certificate\'s expiration date is in the past. Future packages signed with this certificate will fail validation. Upload a renewed certificate to enable signed package uploads.' : ExpirationIso,
                                     class: IsExpired ? 'expired-certificate' : ''
                                     }">
-                                </td>
-                                <td data-bind="text: ShortIssuer, attr: { title: Issuer }"></td>
-                                <td class="text-right align-middle package-controls">
-                                    <span data-bind="visible: CanDelete">
-                                        <a class="btn" title="Delete certificate" tabindex="0" data-bind="attr: { 'data-href': DeleteUrl, 'aria-label': 'Delete certificate' }, click: $parent.deleteCertificate">
-                                            <i class="ms-Icon ms-Icon--Delete" aria-hidden="true"></i>
-                                        </a>
-                                    </span>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-
+                                    </td>
+                                    <td data-bind="text: ShortIssuer, attr: { title: Issuer }"></td>
+                                    <td class="text-right align-middle package-controls">
+                                        <span data-bind="visible: CanDelete">
+                                            <a class="btn" title="Delete certificate" tabindex="0" data-bind="attr: { 'data-href': DeleteUrl, 'aria-label': 'Delete certificate' }, click: $parent.deleteCertificate">
+                                                <i class="ms-Icon ms-Icon--Delete" aria-hidden="true"></i>
+                                            </a>
+                                        </span>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
                     <p>
                         The SHA-256 fingerprint can be found by calculating the SHA-256 hash of the DER encoded
                         certificate file (.cer). The fingerprint should be hex-encoded. This can be done with a variety