Quick Settings Container Width Not Responding to Size Change(1366x768 screen)

[saberr26]

Problem Description

The quick settings window container is not adjusting its width properly when attempting to make it smaller. Despite modifying the widthRequest property in the TypeScript code, the container maintains its current size.

Current Behavior

• Quick settings window remains at its default width
• Width modifications in QSWindow.ts have no visible effect
• Container does not respond to widthRequest property changes

Expected Behavior

The quick settings container should resize to match the specified widthRequest value, allowing for a more compact interface.

Code Changes Attempted

QSWindow.ts

Modified the main container box to include explicit width control:

function QSWindow(_gdkmonitor: Gdk.Monitor) {
  return (
    <PopupWindow
      name={WINDOW_NAME}
      layout={layout.get()}
      margin={10}
      onDestroy={() => layout.drop()}
    >
      <box
        cssClasses={["qs-container"]}
        hexpand={false}
        vexpand={false}
        vertical
        widthRequest={50}  // Main size control - change this number
        // heightRequest={650}  // Uncomment for fixed height
      >
        <stack
          visibleChildName={qsPage()}
          transitionType={Gtk.StackTransitionType.SLIDE_LEFT_RIGHT}
          hexpand={false}
          vexpand={false}
        >
          <MainPage />
          <BatteryPage />
          <SpeakerPage />
          <WifiPage />
          <BluetoothPage />
        </stack>
      </box>
    </PopupWindow>
  );
}

SCSS Modifications

Updated styling to address GTK warnings and improve container sizing:

@use "sass:string";
@use "colors.scss" as *;

.powermenu {
  padding: 24px;
  border-radius: 30px;
  background: $surface_transparent;
}

.powermenu__button {
  padding: 0;
  background: $inverse_surface_transparent;
  color: $on_surface;
  min-width: 100px;
  min-height: 100px;
  border-radius: 100px;
  
  &:hover,
  &:focus {
    color: $on_primary;
    background: $primary, $inverse_surface_transparent_variant_overlay;
  }
  
  &:focus {
    box-shadow: 0 0 0 1px $inverse_surface;
    color: $on_surface;
  }
  
  &:active {
    background: $primary, $inverse_surface_transparent_overlay;
    color: $on_primary;
  }
}

.verification {
  min-width: 300px;
  padding: 24px;
  border-radius: 30px;
  background: $surface_transparent;
}

.verification__title {
  font-size: 20px;
  color: $on_surface;
  font-weight: 500;
}

.verification__description {
  font-size: 16px;
  color: $on_surface;
  font-weight: 400;
}

.verification-container {
  min-width: 300px;
  padding: 24px;
  border-radius: 30px;
  background: $surface_transparent;
  color: $on_surface;
  
  .title {
    font-size: 20px;
    color: $on_surface;
    font-weight: 500;
  }
  
  .body {
    font-size: 16px;
    font-weight: 400;
    color: $on_surface;
  }
  
  .buttons {
    button {
      background-color: $inverse_surface_transparent;
      color: $on_surface;
      min-width: 70px;
      min-height: 28px;
      border-radius: 20px;
      padding: 0.2rem;
      
      &:focus {
        outline-color: $on_surface;
        background: $secondary;
        color: $on_secondary;
      }
    }
    
    button:last-child {
      color: $red;
      
      &:focus {
        color: $on_red;
      }
    }
  }
}

.powermenu-container {
  padding: 24px;
  border-radius: 30px;
  background: $surface_transparent;
  color: $on_surface;
  
  flowboxchild {
    outline: unset;
    padding: 0;
    min-height: 100px;
    border-radius: 100px;
    min-width: 100px;
    
    image {
      color: $on_surface;
    }
    
    &:selected {
      color: $primary;
      border-radius: 100px;
      background-color: $primary;
      
      button,
      image {
        color: $on_primary;
      }
      
      label {
        color: $on_primary;
      }
    }
  }
  
  .system-button {
    background-color: $inverse_surface_transparent;
    border-radius: 100px;
  }
}

Screenshot

Additional Information

• Also attempted to resolve some GTK warnings in the process
• Container expansion properties are set to false to prevent unwanted growth
• The issue persists despite explicit width requests

Possible Solutions Needed

• Investigation into why widthRequest is not being respected
• Alternative approaches to controlling container width
• CSS-based solutions that might override the TypeScript sizing

[acdcbyl]

Ok, will try to fix this when I have some free time. Thanks for your feedback.

[acdcbyl]

hello. after talking about my testing, I found that the overwidth is generally caused by the length of the label inside the page widget is not through the limit (it may be caused by the name of the network card / wifi is too long), I currently set the label's maxwidthchar to 15. you are welcome to try it out, and now the effect on my machine can be viewed in the following picture ( Default, not set min-width in scss).