From 727d4876f5804e2ff1a6adb42f509cb08106f1b6 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Tue, 15 Oct 2024 19:35:24 +0200
Subject: [PATCH] Mobile fixes for volumes

---
 dashboard/public/views/volumes.html | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/dashboard/public/views/volumes.html b/dashboard/public/views/volumes.html
index 96815f786..556998fb0 100644
--- a/dashboard/public/views/volumes.html
+++ b/dashboard/public/views/volumes.html
@@ -203,11 +203,11 @@
         <table class="table table-hover" style="margin-top: 10px; table-layout: fixed;">
           <thead>
             <tr>
-              <th style="width:  5%"></th>
-              <th style="width: 20%" class="text-left">{{ 'volumes.name' | tr }}</th>
-              <th style="width: 15%" class="text-left">{{ 'volumes.type' | tr }}</th>
-              <th style="width: 45%" class="text-left">{{ 'volumes.hostPath' | tr }}</th>
-              <th style="width: 122px" class="text-right">{{ 'main.actions' | tr }}</th>
+              <th style="width: 30px"></th>
+              <th class="text-left">{{ 'volumes.name' | tr }}</th>
+              <th class="text-left">{{ 'volumes.type' | tr }}</th>
+              <th class="text-left hide-mobile" style="width: 40%;">{{ 'volumes.hostPath' | tr }}</th>
+              <th class="text-right">{{ 'main.actions' | tr }}</th>
             </tr>
           </thead>
           <tbody>
@@ -216,15 +216,15 @@
                 <i class="fa fa-circle" ng-style="{ color: volume.status.state === 'active' ? '#27CE65' : '#d9534f' }" ng-show="volume.status" uib-tooltip="{{ volume.status.message }}"></i>
                 <i class="fa fa-circle-notch fa-spin" ng-hide="volume.status"></i>
               </td>
-              <td class="wrap-table-cell">
+              <td>
                 {{ volume.name }}
               </td>
-              <td class="wrap-table-cell">
+              <td>
                 {{ volume.mountType }}
               </td>
-              <td class="text-left wrap-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 wrap-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">
+              <td class="hide-mobile" style="text-wrap: nowrap; overflow: hidden; text-overflow: ellipsis;" ng-hide="(volume.mountType === 'mountpoint' || volume.mountType === 'filesystem')">{{ volume.mountOptions.host || volume.mountOptions.diskPath || volume.hostPath }}{{ volume.mountOptions.remoteDir }}</td>
+              <td class="hide-mobile" style="text-wrap: nowrap; overflow: hidden; text-overflow: ellipsis;" ng-show="(volume.mountType === 'mountpoint' || volume.mountType === 'filesystem')">{{ volume.hostPath }}</td>
+              <td class="text-right" style="text-wrap: nowrap;">
                 <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>
                 <button class="btn btn-xs btn-default" ng-click="volumeEdit.show(volume)" ng-show="isNetworkProvider(volume.mountType)" ng-disabled="volume.remounting" uib-tooltip="{{ 'volumes.editActionTooltip' | tr }}"><i class="fa fa-pencil-alt"></i></button>
                 <a class="btn btn-xs btn-default" ng-href="{{ '/filemanager.html#/home/volume/' + volume.id }}" target="_blank" uib-tooltip="{{ 'volumes.openFileManagerActionTooltip' | tr }}"><i class="fas fa-folder"></i></a>