CT/src/View/ChatPages/messagePage.css

/* layout */
#chat-page #main #message-page .content {
  padding: 0px;

  overflow: hidden;

  display: grid;
  grid-template-rows: 1fr var(--control-height) var(--safe-area-bottom);
}

#message-page #message-container {
  overflow: auto;
}

/* composer */
#message-page #composer {
  display: flex;
  justify-content: center;
}

#message-page #composer input {
  margin: 0px;

  width: 100%;
  max-width: unset;

  flex: 1;

  border-top: 1px solid var(--border);
}

@media (max-width: 700px) {
  #message-page #composer div {
    width: 100%;
    max-width: unset;

    display: flex;
  }
}

@media (min-width: 700px) {
  #message-page #composer .content-width-constraint,
  #message-page #composer .input-width-constraint {
    display: flex;
    justify-content: flex-end;

    width: 100%;
    max-width: var(--max-content-width);
  }

  #message-page #composer .content-width-constraint {
    max-width: var(--max-content-width);
  }

  #message-page #composer .input-width-constraint {
    max-width: var(--max-input-width);
  }
}

/* message */
#message-page #message-container {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: var(--content-padding);
  gap: var(--gap-between-tiles);

  height: auto;
  max-height: unset;

  scroll-behavior: smooth;
}

.message-bubble {
  display: flex;
  width: 100%;
  max-width: var(--max-content-width);
}

.message-bubble .main {
  display: flex;
  flex-direction: row;

  background-color: var(--surface);

  width: 100%;
  max-width: var(--max-input-width);
  overflow: hidden;
}

.message-bubble .main .text-container {
  display: flex;
  flex-direction: column;

  overflow: hidden;

  width: 100%;
  flex: 1;
}

.message-bubble .main .button-container {
  display: flex;
  align-items: start;
}

.message-bubble .main button {
  justify-content: center;

  padding: 0px;
  width: var(--control-height);

  --surface: transparent;
}

.message-bubble .main .text-container {
  padding: var(--control-padding);
}

.message-bubble .main .timestamp,
.message-bubble .main .timestamp .icon,
.message-bubble .main .sender-name {
  font-size: 0.8rem;
  opacity: 0.6;
}

.message-bubble .main .timestamp {
  display: flex;
  align-items: center;
  gap: var(--gap-between-tiles);
}

.message-bubble .main .timestamp .icon {
  display: none;
}

.message-bubble .main .sender-name {
  font-weight: bold;
}

.message-bubble .main .body {
  word-break: break-word;
}

.message-bubble[sentbyuser] {
  justify-content: flex-end;
}

.message-bubble[sentbyuser] {
  align-items: flex-end;
}

.message-bubble[sentbyuser] .main,
.message-bubble[sentbyuser] .main .timestamp {
  flex-direction: row-reverse;
}

.message-bubble[sentbyuser] .main .timestamp .icon {
  display: flex;
}

.message-bubble[sentbyuser] .main span {
  text-align: right;
}