Simplify relation card body part tags

数据库Web可视化/static/styles.css

@@ -397,30 +397,19 @@ button {
   font-size: 12px;
 }
 
-.card-layout {
+.card-topline {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(112px, 0.72fr);
+  grid-template-columns: minmax(0, 1fr) auto;
   gap: 10px;
   align-items: start;
 }
 
-.card-main,
-.card-side {
+.card-main {
   min-width: 0;
   display: grid;
   gap: 7px;
 }
 
-.card-side {
-  justify-items: end;
-}
-
-.important-tags {
-  max-width: 100%;
-  justify-content: flex-end;
-  flex-wrap: wrap;
-}
-
 .mini-badge {
   flex: 0 0 auto;
   padding: 2px 7px;
@@ -454,7 +443,8 @@ button {
   overflow: hidden;
 }
 
-.inline-tags em {
+.inline-tags em,
+.card-tag-rail em {
   max-width: 96px;
   padding: 2px 7px;
   overflow: hidden;
@@ -468,6 +458,26 @@ button {
   white-space: nowrap;
 }
 
+.card-tag-rail {
+  display: flex;
+  gap: 6px;
+  min-width: 0;
+  overflow-x: auto;
+  padding: 2px 0 3px;
+  scrollbar-width: thin;
+}
+
+.card-tag-rail em {
+  max-width: 112px;
+  flex: 0 0 auto;
+}
+
+.card-tag-rail .model-tag {
+  border-color: rgba(52, 118, 246, 0.46);
+  color: #cfe0ff;
+  background: rgba(52, 118, 246, 0.1);
+}
+
 .subtle {
   color: var(--muted);
   font-size: 12px;