custom css related queries

There are a few questions:

I need to reduce the font size

In order to reduce the font size, I added the following custom css:

.text-base {
  font-size: 14px;
  line-height: 20px;
}

This reduced the size of the text to what I needed. But, is there a way to change the size of text appearing in the input html tags? Those sizes still remain 16px as seen in following example:
<input class="focus:outline-none bg-transparent px-4 py-4 flex-1 w-full text-input" type="text" placeholder="Type your name..." style="font-size: 16px;">
Is there a way to override this?

I need to reduce the bubble spacing/padding.

I used the following custom css:

[data-testid="guest-bubble"] {
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
}

[data-testid="host-bubble"] {
  margin-left: 8px;
  margin-right: 8px;
  margin-top: 4px;
  margin-bottom: 4px;
}

The guest bubble works fine, but in the host bubble the bottom and right margins do not work. Can check attached images.

Attachment

2 comments

WWilliam

For point 1, i was able to change the font size for the input html element with the following custom css:

input.text-input {
    font-size: 14px !important;
}

WWilliam

For point 2, i was able to fix the margin issue in the host bubble by adding:

div.text-ellipsis {
  margin-left: 8px;
  margin-right: 8px;
  margin-top: 4px;
  margin-bottom: 4px;
}

also removed the following:

[data-testid="host-bubble"] {
  margin-left: 8px;
  margin-right: 8px;
  margin-top: 4px;
  margin-bottom: 4px;
}

I am not sure if the above solutions are the best possible, but they are working for now. Leaving it here if anyone wants to use them, or if anyone has better advice.

Add a reply

Share feedback, ideas and get community help

custom css related queries