Clean up polluted styles and remove dead CSS code (#24497)

Follow #24393


The funny history:

* At the beginning, `.ui.message` was polluted by `text-align: center`
* Then people do `<div class="ui ... message text left">`
* But `.ui.left` is polluted by `float: left`
* Then people do `#xxx .ui.message { width: 100% !important;}`

The code just becomes more and more hacky.

After removing the pollution,  everything becomes clear and straight.


And, this PR also does:

1. Remove the `package.css`, its styles could be provided by `top
aligned`
2. Remove `#avatar-arrow`, dead code



Screenshot:


![image](https://user-images.githubusercontent.com/2114189/235862130-a9eb5d8f-7d01-457c-99f7-21d0abc3075e.png)


![image](https://user-images.githubusercontent.com/2114189/235862222-139709a7-95c2-4f89-a40f-100b2d76d9bb.png)

Co-authored-by: Giteabot <teabot@gitea.io>

templates/package/content/container.tmpl

@@ -69,7 +69,7 @@
 	{{if .PackageDescriptor.Metadata.Labels}}
 		<h4 class="ui top attached header">{{.locale.Tr "packages.container.labels"}}</h4>
 		<div class="ui attached segment">
-			<table class="ui very basic compact table container-labels">
+			<table class="ui very basic compact table">
 				<thead>
 					<tr>
 						<th>{{.locale.Tr "packages.container.labels.key"}}</th>
@@ -79,8 +79,8 @@
 				<tbody>
 					{{range $key, $value := .PackageDescriptor.Metadata.Labels}}
 						<tr>
-							<td>{{$key}}</td>
-							<td>{{$value}}</td>
+							<td class="top aligned">{{$key}}</td>
+							<td class="gt-word-break">{{$value}}</td>
 						</tr>
 					{{end}}
 				</tbody>