Comment box design disturbed when write long text and focus out with mouse

Hi Alkesh,
Thanks for reporting this! This issue usually happens because the comment box auto-adjusts its height on focus, or long unbroken text forces the container layout to collapse/warp when the input loses focus (focusout / blur).
Here is a clean, standard CSS fix to ensure the box keeps its structure, wraps long text properly, and maintains its square shape regardless of focus state:

code
CSS
/* Ensure the comment wrapper retains consistent dimensions */
.comment-box-container {
width: 100%;
max-width: 350px; /* Adjust to match design specs */
aspect-ratio: 1 / 1; /* Retains square aspect ratio */
box-sizing: border-box;
}

/* Fix for textarea long text distortion & focus/blur shifts */
.comment-box-container textarea,
.comment-form-comment textarea {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 12px 16px;

/* Prevent manual handle distortion */
resize: none;

/* Handle long unbroken text, URLs, and scrolling */
overflow-y: auto;
overflow-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;

/* Keep consistent height between focus and blur states */
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Ensure focus-out/blur doesn’t jump or collapse height */
.comment-box-container textarea:focus,
.comment-box-container textarea:not(:placeholder-shown) {
/* Retain fixed dimension state when filled */
height: 100%;
}

Hope this helps!