# Are uxp panels a fixed width?

**URL:** <https://forums.creativeclouddeveloper.com/t/are-uxp-panels-a-fixed-width/8636>\
**Category:** UXP Plugin API\
**Tags:** react, ui, css, spectrum\
**Created:** [November 5, 2024, 2:11pm UTC](https://forums.creativeclouddeveloper.com/t/are-uxp-panels-a-fixed-width/8636 "2024-11-05T14:11:30Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![drexalFunc](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@drexalFunc](https://forums.creativeclouddeveloper.com/u/drexalFunc)\
**Post date:** [November 5, 2024, 2:11pm UTC](https://forums.creativeclouddeveloper.com/t/are-uxp-panels-a-fixed-width/8636/1 "2024-11-05T14:11:30Z")

</div>

I am trying to determine if the spacing to the side of the plugin is usable? Please see screen shot attached.

The panels width seems to be limited, the buttons expand to a point and then once the panels width has exceeded some px, the buttons no longer respond responsively or fit the newly expanded window. What am I doing wrong? or is this a feature I have to work with?

 ![Screenshot 2024-11-05 at 14.09.19](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/6/6bb811ae3bf616695aa1e8efae1bfec3bac8eb85.png)

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [November 5, 2024, 4:41pm UTC](https://forums.creativeclouddeveloper.com/t/are-uxp-panels-a-fixed-width/8636/2 "2024-11-05T16:41:08Z")

</div>

It fully depends on your CSS. Here’s a video example of my plugin (from 21-st second):

[![](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/a/ae8fd60d4cd4541aabd3bc0673ccc919b3af3ff6.jpeg "Create a Custom Panel for Adobe Photoshop") ](https://www.youtube.com/watch?v=a-hY12DcYBk&t=21s)

---

<div class="post-metadata">

**Author:** ![drexalFunc](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@drexalFunc](https://forums.creativeclouddeveloper.com/u/drexalFunc)\
**Post date:** [November 5, 2024, 5:21pm UTC](https://forums.creativeclouddeveloper.com/t/are-uxp-panels-a-fixed-width/8636/3 "2024-11-05T17:21:19Z")

</div>

It’s just that blank space to the right that i can’t seem to place my content in/across etc

Any help would be much appreciated, even just being able to place the content in the right side of the panel leaving space on the left would be insightful… I’m trying to understand why at all turns i’m unable to place anything in that area let alone make use of all the space a panel has to offer.

I’ve tried applying a width of auto/specifc pixel number etc etc, any pointers would be a massive massive help

main.js

```auto
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

var root = document.createElement("div");
root.style.height = "100vh";
root.style.overflow = "auto";
root.style.padding = "10px 20px";
// Add an id and class
root.id = "root-div"; // Assigns an id
root.className = "root-container"; // Assigns a class

ReactDOM.render(
  <App />,
  document.body.appendChild(root)
)

```

The App.js just renders a bunch of sp-action-buttons

and this is the css:

```auto

.container {
    display: flex;
    flex-wrap: wrap;         

}

sp-action-button sp-picker{
    flex: 1 1 50%;           
    box-sizing: border-box;   
    padding: 10px;

    max-width: 150px;  
    white-space: nowrap;     
    overflow: hidden;         
    text-overflow: ellipsis;  

}

```

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [November 5, 2024, 5:34pm UTC](https://forums.creativeclouddeveloper.com/t/are-uxp-panels-a-fixed-width/8636/4 "2024-11-05T17:34:21Z")

</div>

Check “Elements” section in your DevTools to see what’s the final layout and what styles are there. From what you provided, I can’t say much 🤷‍♂️

---

<div class="post-metadata">

**Author:** ![Gustav](https://avatars.discourse-cdn.com/v4/letter/g/919ad9/32.png) [@Gustav](https://forums.creativeclouddeveloper.com/u/Gustav)\
**Post date:** [November 8, 2024, 8:40am UTC](https://forums.creativeclouddeveloper.com/t/are-uxp-panels-a-fixed-width/8636/5 "2024-11-08T08:40:18Z")

</div>

in the uxp manifest, you should have entrypoints (your panels)

these objects can have maximum and minimum width.

there are also limitations in the types of css styles you can use in uxp, detailed here: [https://developer.adobe.com/xd/uxp/uxp/reference-css/Styles/](https://developer.adobe.com/xd/uxp/uxp/reference-css/Styles/)

in my experience, the way to handle responsiveness in uxp is via javascript, to take clientWidth measurements and set classnames based on whatever breakpoints, or set width inline via js

hope this helps, and good luck! 🙂

---

<div class="post-metadata">

**Author:** ![drexalFunc](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@drexalFunc](https://forums.creativeclouddeveloper.com/u/drexalFunc)\
**Post date:** [November 8, 2024, 11:32am UTC](https://forums.creativeclouddeveloper.com/t/are-uxp-panels-a-fixed-width/8636/6 "2024-11-08T11:32:38Z")

</div>

Thank you so much! That’s seems like its my issue, on a quick glance of my manifest I have a set min/max width, I really appreciate your response!

When i have some time to tinker I’ll check if this was my issue but it does look like its the culprit.

Cheers Gustav!