调整协议卡片两行布局
Some checks are pending
Security Checks / security (push) Waiting to run

提交当前协议名称、服务类型和参数区域的布局调整,作为继续修正 SMTP 标签显示问题前的检查点。
This commit is contained in:
smail 2026-09-27 09:27:04 +08:00
parent 9ccfecf9b0
commit 9e0888b51e

View File

@ -263,48 +263,50 @@
}
.proto-name-badge {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto;
align-items: baseline;
gap: 2px 8px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
min-width: 0;
}
.proto-name-badge > .el-tag {
grid-column: 2;
grid-row: 2;
justify-self: end;
max-width: 100%;
flex: 0 1 auto;
align-self: flex-end;
max-width: 42%;
padding-inline: 4px;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.proto-title {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto;
grid-column: 1;
grid-row: 1 / 3;
display: flex;
flex-direction: column;
min-width: 0;
gap: 2px;
line-height: 1.35;
}
.proto-name {
grid-row: 1;
min-width: 0;
font-size: 14px;
font-weight: 700;
color: var(--pm-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.proto-service {
grid-row: 2;
min-width: 0;
font-size: 13px;
font-weight: 600;
color: var(--pm-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.btn-card-copy {
@ -317,19 +319,19 @@
}
.proto-fields {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(72px, 0.75fr) minmax(0, 1fr);
gap: 8px;
align-items: center;
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 1px;
}
.field-item {
display: flex;
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
align-items: baseline;
min-width: 0;
font-size: 13px;
gap: 5px;
gap: 6px;
line-height: 1.35;
}
@ -341,9 +343,10 @@
.field-v {
min-width: 0;
color: var(--pm-text-primary);
text-align: left;
word-break: normal;
overflow-wrap: anywhere;
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.font-mono {
@ -386,32 +389,4 @@
margin-left: 0;
}
.proto-fields {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.field-item {
display: block;
}
.field-k,
.field-v {
display: block;
}
}
@media (max-width: 640px) {
.proto-fields {
grid-template-columns: minmax(0, 1fr);
}
.field-item {
display: flex;
}
.field-k,
.field-v {
display: inline;
}
}