I'll make the adjustments you've requested to the iMessage generator component.

Here's the updated iMessage screenshot generator with the requested changes:

Here are the changes made to the iMessage screenshot generator:

1. Phone width: Increased the max-width of the phone container from max-w-sm to max-w-md to make it wider.

2. Font sizes: Reduced the font size for "Messages", contact name, and "Details":

   • Changed "Messages" and "Details" from text-lg to text-base
   • Changed the contact name from text-xl to text-lg
3. Battery percentage: Set to 20% in the display. The battery icon's fill width is now fixed to represent 20% charge.
4. Top row styling: Added font-medium to the carrier name, time, and battery percentage text.
5. Removed the battery level input from the form since it's now fixed at 20%.

These changes should bring the iMessage generator closer to your desired look, with a wider phone display, smaller font sizes for the header elements, and a fixed 20% battery level. The top row (carrier, time, battery) now has a medium font weight for better visibility.

I'll make these adjustments to the iMessage generator component. Let's implement these changes.

Here's the updated iMessage screenshot generator with the requested changes:

Here are the changes made to the iMessage screenshot generator:

1. Pressing Enter in the new message text area now adds a message:

   • Added a handleKeyDown function that checks for the Enter key press (without Shift) and calls addMessage.
   • Added onKeyDown={handleKeyDown} to the Textarea component.

2. Chat bubbles are now only as wide as their contents:

   • Changed the container div for messages from div to inline-block.
   • Adjusted padding to px-3 py-2 for a tighter fit.

3. Reduced horizontal spacing between the left arrow icon and "Messages":

   • Changed ml-4 to space-x-2 in the flex container for the icon and text.

4. Increased horizontal spacing between Messages, contact name, and Details:

   • Restructured the header div to use flexbox with items-center.
   • Made the contact name take up the remaining space with flex-grow and centered it with text-center.
   • Added flex-shrink-0 to "Messages" and "Details" to prevent them from shrinking.

5. Set the width of the phone to 350px:

   • Changed max-w-md to w-[350px] on the main phone container.

6. Ensured the contact name is always centered:

   • Added flex-grow text-center to the contact name span.

These changes should address all the points you've mentioned, creating a more accurate and responsive iMessage generator. The layout now more closely resembles an actual iMessage interface, with improved spacing and sizing for various elements.