fix table ellipsis

Author: wxiaoguang

templates/admin/notice.tmpl

@@ -3,30 +3,26 @@
 		<h4 class="ui top attached header">
 			{{.locale.Tr "admin.notices.system_notice_list"}} ({{.locale.Tr "admin.total" .Total}})
 		</h4>
-		<table id="notice-table" class="ui attached basic select selectable table unstackable">
+		<table class="ui attached basic select selectable table unstackable g-table-auto-ellipsis">
 			<thead>
 				<tr>
 					<th></th>
 					<th>ID</th>
 					<th>{{.locale.Tr "admin.notices.type"}}</th>
 					<th>{{.locale.Tr "admin.notices.desc"}}</th>
-					<th width="100px">{{.locale.Tr "admin.users.created"}}</th>
+					<th>{{.locale.Tr "admin.users.created"}}</th>
 					<th>{{.locale.Tr "admin.notices.op"}}</th>
 				</tr>
 			</thead>
 			<tbody>
 				{{range .Notices}}
 					<tr>
-						<td class="collapsing">
-							<div class="ui fitted checkbox" data-id="{{.ID}}">
-								<input type="checkbox">
-							</div>
-						</td>
+						<td><div class="ui checkbox gt-db" data-id="{{.ID}}"><input type="checkbox"></div></td>
 						<td>{{.ID}}</td>
 						<td>{{$.locale.Tr .TrStr}}</td>
-						<td class="view-detail"><span class="notice-description text">{{.Description}}</span></td>
-						<td>{{DateTime "short" .CreatedUnix}}</td>
-						<td><a href="#">{{svg "octicon-note" 16 "view-detail"}}</a></td>
+						<td class="view-detail auto-ellipsis" style="width: 80%;"><span class="notice-description">{{.Description}}</span></td>
+						<td nowrap>{{DateTime "short" .CreatedUnix}}</td>
+						<td class="view-detail"><a href="#">{{svg "octicon-note" 16}}</a></td>
 					</tr>
 				{{end}}
 			</tbody>

web_src/css/admin.css

@@ -60,27 +60,3 @@
   white-space: pre-wrap;
   word-wrap: break-word;
 }
-
-@media (max-width: 767px) {
-  .admin #notice-table .notice-description {
-    max-width: 80vw;
-  }
-}
-
-@media (min-width: 768px) and (max-width: 991px) {
-  .admin #notice-table .notice-description {
-    max-width: 360px;
-  }
-}
-
-@media (min-width: 992px) and (max-width: 1200px) {
-  .admin #notice-table .notice-description {
-    max-width: 510px;
-  }
-}
-
-@media (min-width: 1201px) {
-  .admin #notice-table .notice-description {
-    max-width: 640px;
-  }
-}

web_src/css/helpers.css

@@ -2,6 +2,7 @@
 Gitea's tailwind-style CSS helper classes have `gt-` prefix.
 Gitea's private styles use `g-` prefix.
 */
+.gt-db { display: block !important; }
 .gt-df { display: flex !important; }
 .gt-di { display: inline !important; }
 .gt-dif { display: inline-flex !important; }
@@ -42,6 +43,23 @@ Gitea's private styles use `g-` prefix.
   text-overflow: ellipsis !important;
 }
 
+
+.g-table-auto-ellipsis td.auto-ellipsis {
+  position: relative;
+}
+
+.g-table-auto-ellipsis td.auto-ellipsis span {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  padding: inherit;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 /* below class names match Tailwind CSS */
 .gt-break-all { word-break: break-all !important; }
 .gt-content-center { align-content: center !important; }