Ensure long volume names do not overflow the table

This commit is contained in:
Johannes Zellner
2022-06-10 12:55:23 +02:00
parent c4ed5edecb
commit 4f0784bbdc

View File

@@ -126,13 +126,13 @@
</div>
<div class="row animateMeOpacity ng-hide" ng-show="ready">
<div class="col-lg-12">
<table class="table table-hover" style="margin-top: 10px;">
<table class="table table-hover" style="margin-top: 10px; table-layout: fixed;">
<thead>
<tr>
<th style="width: 5%"></th>
<th style="width: 25%" class="text-left">{{ 'volumes.name' | tr }}</th>
<th style="width: 10%" class="text-left">{{ 'volumes.type' | tr }}</th>
<th style="width: 55%" class="text-left">{{ 'volumes.hostPath' | tr }}</th>
<th style="width: 20%" class="text-left">{{ 'volumes.name' | tr }}</th>
<th style="width: 20%" class="text-left">{{ 'volumes.type' | tr }}</th>
<th style="width: 45%" class="text-left">{{ 'volumes.hostPath' | tr }}</th>
<th style="width: 10%" class="text-right">{{ 'main.actions' | tr }}</th>
</tr>
</thead>
@@ -148,10 +148,8 @@
<td class="elide-table-cell">
{{ volume.mountType }}
</td>
<td class="text-left elide-table-cell hidden-xs hidden-sm">
<span ng-show="volume.mountType !== 'mountpoint' && volume.mountType !== 'filesystem'">{{ volume.mountOptions.host || volume.mountOptions.diskPath || volume.hostPath }}{{ volume.mountOptions.remoteDir }}</span>
<span ng-show="volume.mountType === 'mountpoint' || volume.mountType === 'filesystem'">{{ volume.hostPath }}</span>
</td>
<td class="text-left elide-table-cell hidden-xs hidden-sm" ng-show="volume.mountType !== 'mountpoint' && volume.mountType !== 'filesystem'">{{ volume.mountOptions.host || volume.mountOptions.diskPath || volume.hostPath }}{{ volume.mountOptions.remoteDir }}</td>
<td class="text-left elide-table-cell hidden-xs hidden-sm" ng-show="volume.mountType === 'mountpoint' || volume.mountType === 'filesystem'">{{ volume.hostPath }}</td>
<td class="text-right no-wrap" style="vertical-align: bottom">
<button class="btn btn-xs btn-default" ng-click="remount(volume)" ng-show="isMountProvider(volume.mountType)" ng-disabled="volume.remounting" uib-tooltip="{{ 'volumes.remountActionTooltip' | tr }}"><i class="fa fa-sync-alt" ng-class="{ 'fa-spin': volume.remounting }"></i></button>
<a class="btn btn-xs btn-default" ng-href="{{ '/filemanager.html?type=volume&id=' + volume.id }}" target="_blank" uib-tooltip="{{ 'volumes.openFileManagerActionTooltip' | tr }}"><i class="fas fa-folder"></i></a>