Remove unused or abused styles (#33918)

* `top aligned` => `tw-align-top`
* label list: it was broken, this PR fixes it
* reference link: simplified
* settings/repos: not affected

templates/package/content/container.tmpl

@@ -82,7 +82,7 @@
 				<tbody>
 					{{range $key, $value := .PackageDescriptor.Metadata.Labels}}
 						<tr>
-							<td class="top aligned">{{$key}}</td>
+							<td class="tw-align-top">{{$key}}</td>
 							<td class="tw-break-anywhere">{{$value}}</td>
 						</tr>
 					{{end}}

templates/repo/issue/labels/label_list.tmpl

@@ -63,14 +63,12 @@
 
 		{{if and (not .PageIsOrgSettingsLabels) (.OrgLabels)}}
 			<li class="item">
-				<div class="ui grid middle aligned">
+				<div>{{/* parent is flex, so use block here to keep sentence spaces */}}
-					<div class="ten wide column">
 					{{ctx.Locale.Tr "repo.org_labels_desc"}}
 					{{if .IsOrganizationOwner}}
 						<a href="{{.OrganizationLink}}/settings/labels">({{ctx.Locale.Tr "repo.org_labels_desc_manage"}})</a>:
 					{{end}}
 				</div>
-				</div>
 			</li>
 
 			{{range .OrgLabels}}

templates/repo/issue/sidebar/reference_link.tmpl

@@ -1,8 +1,6 @@
 <div class="divider"></div>
-<div class="ui equal width compact grid">
 {{$issueReferenceLink := printf "%s#%d" .Issue.Repo.FullName .Issue.Index}}
-	<div class="row tw-items-center" data-tooltip-content="{{$issueReferenceLink}}">
+<div class="flex-text-block" data-tooltip-content="{{$issueReferenceLink}}">
-		<span class="text column truncate">{{ctx.Locale.Tr "repo.issues.reference_link" $issueReferenceLink}}</span>
+	<span class="tw-flex-1 gt-ellipsis">{{ctx.Locale.Tr "repo.issues.reference_link" $issueReferenceLink}}</span>
-		<button class="ui two wide button column tw-p-2" data-clipboard-text="{{$issueReferenceLink}}">{{svg "octicon-copy" 14}}</button>
+	<button class="ui compact tiny icon button" data-clipboard-text="{{$issueReferenceLink}}">{{svg "octicon-copy" 14}}</button>
-	</div>
 </div>

templates/user/settings/repos.tmpl

@@ -81,7 +81,7 @@
 				{{end}}
 			{{else}}
 				{{if .Repos}}
-					<div class="ui middle aligned divided list">
+					<div class="ui list">
 						{{range .Repos}}
 							<div class="item">
 								<div class="content flex-text-block">

web_src/css/modules/grid.css

@@ -393,28 +393,6 @@
   margin-right: 2.5rem;
 }
 
-.ui[class*="middle aligned"].grid > .column:not(.row),
-.ui[class*="middle aligned"].grid > .row > .column,
-.ui.grid > [class*="middle aligned"].row > .column,
-.ui.grid > [class*="middle aligned"].column:not(.row),
-.ui.grid > .row > [class*="middle aligned"].column {
-  flex-direction: column;
-  vertical-align: middle;
-  align-self: center !important;
-}
-
-.ui[class*="equal width"].grid > .column:not(.row),
-.ui[class*="equal width"].grid > .row > .column,
-.ui.grid > [class*="equal width"].row > .column {
-  display: inline-block;
-  flex-grow: 1;
-}
-.ui[class*="equal width"].grid > .wide.column,
-.ui[class*="equal width"].grid > .row > .wide.column,
-.ui.grid > [class*="equal width"].row > .wide.column {
-  flex-grow: 0;
-}
-
 @media only screen and (max-width: 767.98px) {
   .ui[class*="mobile reversed"].grid,
   .ui[class*="mobile reversed"].grid > .row,

web_src/css/modules/table.css

@@ -152,16 +152,6 @@
   }
 }
 
-.ui.table[class*="top aligned"],
-.ui.table [class*="top aligned"] {
-  vertical-align: top;
-}
-
-.ui.table[class*="middle aligned"],
-.ui.table [class*="middle aligned"] {
-  vertical-align: middle;
-}
-
 .ui.table th.collapsing,
 .ui.table td.collapsing {
   width: 1px;

web_src/fomantic/build/components/form.css

@@ -1499,16 +1499,6 @@
   width: 100%;
 }
 
-/*--------------------
-     Equal Width
----------------------*/
-
-.ui[class*="equal width"].form .fields > .field,
-.ui.form [class*="equal width"].fields > .field {
-  width: 100%;
-  flex: 1 1 auto;
-}
-
 /*--------------------
       Inline Fields
   ---------------------*/

web_src/fomantic/build/components/modal.css

@@ -116,12 +116,7 @@
   align-self: start;
   max-width: 100%;
 }
-.ui.modal > [class*="top aligned"] {
+
-  align-self: start;
-}
-.ui.modal > [class*="middle aligned"] {
-  align-self: center;
-}
 .ui.modal > [class*="stretched"] {
   align-self: stretch;
 }