Custom Meta box change size

Question

I a plugin that I have made (SNUP Widget) there is a strange error.
When I use widescreen monitor this custom meta box I made looks ok. But with I open browser on my PC with split screen that is not widescreen then the metabox size is showing up strange.
See the screendump.

Here is the code for the metabox:

function snup_add_meta_box(){
    add_meta_box (
        'snup_id', //id
        'Show Next Upcoming Post', //title
        'snup_callback', //callback
        'post', //screen
        'normal', //context
        'default', //priority

    );
}
add_action('add_meta_boxes', 'snup_add_meta_box');


function snup_callback($post){ 
    wp_nonce_field('snup_meta_box', 'snup_meta_box_nonce');

$snuptext = get_post_meta($post->ID, 'snuptext', true);
$label1=__('Please type the teaser text here','snup-lang');
$label2=__('Max 100 characters.', 'snup-lang');

?>
    <p>
    <label><b><?php echo esc_html_e($label1);?></b></label><br>
    <label><?php echo esc_html_e($label2);?></label><br>
    <textarea style="resize:none" name="snuptext" rows="3" cols="100%" maxlength="100"><?php echo esc_textarea($snuptext);?></textarea>
    </p>

Answer 1

all you need to do is cols="40", any size you want. I am not sure if WordPress provides class for this but you can also use inline CSS style="width: 100%; box-sizing:border-box; -moz-box-sizing:border-box;" or add this CSS to admin style.