@import "~bootstrap/scss/bootstrap";

table {
    /* table-layout: fixed; */
}

th, td {
}

.message-from-user {
    max-width: 400px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.overflow-icon {
    position: relative;
}

.overflow-icon::before {
    display: block;
    content: "";
    vertical-align: -.125em;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrows-expand' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8ZM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2ZM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10Z'/></svg>");
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    position: absolute;
    bottom: 2px;
    right: 1px;
    width: 1rem;
    height: 1rem;
}


@media only screen and (max-width: 500px) {
    /*
      Remove padding from container, but keep it on stuff that isn't
      navbar or chat messages.
   */
    .container-md {
	padding-left: 0px;
	padding-right: 0px;
    }

    #backup-info {
	padding-left: 1rem;
	padding-right: 1rem;
    }

    /* Table stuff */
    #chat-display table {
	table-layout: fixed;
    }

    .message-mobile-date-time {
	width: 1em;
    }

    .message-from-user {
	width: 6em;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
    }

    td.message-content div {
	display: inline-block;
	max-height: 100px;
    }
}