Custom Widget weird width properties.

[south wharf]

Hello, I'm SmithBot, your Appsmith support companion! For the Custom widget's
responsiveness issue, you should use CSS to manage the width so it spans the
full container on different screen sizes. You may use relative units like 'vw'
(viewport width), percentages, or media queries in CSS to ensure the widget is
responsive. Adjusting the widget manually with handles in the editor might not
offer the same level of responsiveness as CSS would. Here's a short guide on
making your Custom widget responsive: - Set the width of the widget to a
percentage value or use 'vw' to ensure it scales with the viewport. - Consider
using CSS media queries to adjust the widget's style based on the screen size.
Can you access the Custom widget CSS properties in your cloud environment or do
you need information on where to find them? If you don't find my response
helpful, you can request to speak to a human agent

[kindred carbon]

#chat-container {
overflow-y: auto;
overflow-x: auto;
display: flex;
flex-direction: column;
padding: 20px;
margin: auto; /* Center the chat container */
}

.message {
display: flex;
flex-direction: column;
padding: 10px;
border-radius: 20px;
color: #fff;
margin: 10px;
width: fit-content;
max-width: 100%; /* Allow the message to expand up to the full width of its parent */
}

.timestamp {
font-size: 0.65rem;
margin-top: 5px;
width: 100%;
text-align: left; /* Default alignment */
}

.outgoing {
background: #80e09a;
align-self: flex-end;
border-bottom-right-radius: 2px;
}

.incoming {
background: #f0f0f0;
color: #333;
align-self: flex-start;
border-bottom-left-radius: 2px;
}

/* Align timestamps based on message direction /
.outgoing .timestamp {
text-align: left; / Left align timestamps for outgoing messages */
}

.incoming .timestamp {
text-align: right; /* Right align timestamps for incoming messages */
}

/* Responsive adjustments /
@media (max-width: 768px) { / Adjust for tablets and below /
#chat-container {
width: 95%; / Increase width on smaller screens */
padding: 10px;
}

.message {
    margin: 5px 0; /* Reduce margin for smaller screens */
}

}

@media (max-width: 480px) { /* Adjust for mobile devices /
#chat-container {
width: 100%; / Use the full width on very small screens */
}

.message {
    max-width: 90%; /* Allow messages to be wider on small screens */
}

}

How do I modify this CSS to disable horiztonal scrolling in the container?

And instead move my message bubbles?

[south wharf]

To disable horizontal scrolling and ensure the message bubbles move within the
container without causing overflow, you should prevent the elements from
exceeding the width of #chat-container. Applying max-width: 100% and setting
overflow-x to hidden in #chat-container can achieve that. Additionally,
ensure that the combined padding and width of child elements don't exceed 100%
of the container's width. Here's how you can modify the CSS for that: css #chat-container { overflow-y: auto; overflow-x: hidden; /* Disable horizontal scrolling */ display: flex; flex-direction: column; padding: 20px; margin: auto; } .message { display: flex; flex-direction: column; padding: 10px; border-radius: 20px; color: #fff; margin: 10px; width: fit-content; max-width: calc(100% - 20px); /* Adjust max-width to account for left and right padding */ } /* Rest of the CSS remains unchanged */ @media (max-width: 480px) { #chat-container { width: 100%; padding: 10px; /* Reduced padding for small screens */ } .message { padding: 5px; /* Adjust padding for smaller screens */ margin: 5px 0; /* Adjust margin for smaller screens */ max-width: calc(90% - 10px); /* Adjust max-width to account for padding */ } } By using `calc(100%

• 20px)andcalc(90% - 10px)for the max-width in.message, the message bubbles will not exceed the width of the container, preventing horizontal overflow while allowing them to adjust their width within the #chat-container`’s width constraints. If you don't find my response helpful,
  you can request to speak to a human agent

[sudden bison]

@kindred carbon is this still an issue? Can you please post your question again?