bitforum-frontend/app/(main)/(account)/my-comments/style.scss

#myComments {
	padding: 0 32px 32px 32px;

	h1 {
		font-size: 22px;
		margin-bottom: 10px;
	}

	.summary {
		font-size: 16px;
		margin-bottom: 10px;
	}

	.mypage-list {
		border-top: 1px solid var(--border-default);
		margin: 0.75rem 0;

		article:nth-of-type(1) {
			background-color: #f9fafb;
			border-bottom: 1px solid var(--border-default);
			padding: 0.5rem 0;

			ul {
				display: grid;
				grid-template-columns:
					clamp(40px, 5%, 60px)
					clamp(60px, 10%, 120px)
					clamp(100px, 18%, 200px)
					1fr
					clamp(40px, 7%, 70px)
					clamp(70px, 12%, 110px);
				column-gap: 0.75rem;

				li {
					text-align: center;
					font-size: 0.875rem;
					color: var(--text-secondary);
				}
			}

			@media (max-width: 1024px) {
				display: none;
			}
		}

		article:nth-of-type(2) {
			box-sizing: border-box;

			section {
				padding: 0.5rem 0;
				box-sizing: inherit;
				border-bottom: 1px solid var(--border-default);

				&:hover {
					background-color: #faffd1;
				}

				// PC
				ol {
					display: grid;
					grid-template-columns:
						clamp(40px, 5%, 60px)
						clamp(60px, 10%, 120px)
						clamp(100px, 18%, 200px)
						1fr
						clamp(40px, 7%, 70px)
						clamp(70px, 12%, 110px);
					column-gap: 0.75rem;
					align-items: center;

					li {
						text-align: center;
						font-size: 0.875rem;

						&:nth-child(3) {
							min-width: 0;
							text-align: left;
							word-break: keep-all;
							overflow-wrap: break-word;
						}

						&.comment-content {
							min-width: 0;
							text-align: left;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}

				// Mobile
				dl {
					dt {
						font-size: 1.063rem;
						word-break: keep-all;
						overflow-wrap: break-word;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
					}

					dd {
						ul {
							display: flex;
							flex-direction: row;
							flex-wrap: nowrap;
							justify-content: start;
							padding-top: 0.4rem;
							column-gap: 1rem;

							li {
								font-size: 0.813rem;
								color: var(--text-muted);

								&:first-child {
									min-width: 0;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}

								&:last-child {
									flex-shrink: 0;
									text-align: right;
								}
							}
						}
					}
				}

				a {
					color: var(--text-link);
					text-decoration: none;

					&:hover {
						text-decoration: underline;
						color: var(--text-link-hover);
					}

					> em {
						display: inherit;
						font-style: normal;
					}
				}

				@media (max-width: 1024px) {
					ol {
						display: none;
					}
					dl {
						display: block;
					}
				}
			}

			> .empty {
				text-align: center;
				padding: 2.5rem;
				color: var(--text-muted);
			}
		}
	}
}